Using the Color Picker
Use this color picker to choose a color visually, type a value directly, sample colors from an image, or explore palettes from the color wheel. The current color is converted into Hex, RGB, HSL, HSV, and OKLCH so it can move cleanly between CSS, design tools, and exported code.
Using the Hex Color Picker
The picker lets you move through the color field by dragging the selection point, editing the channel values, or entering a Hex code. As the color changes, the swatches, harmonies, variations, contrast previews, and export panels update from the same selected value.
How Many Hex Colors Are There?
A Hex color uses six hexadecimal characters in the form #RRGGBB. Each pair controls red, green, or blue from 00 to FF, which gives web designers 16,777,216 possible RGB colors.
Image Color Picker
The image picker can sample colors directly from an uploaded picture. Move any pick point over the image to capture a color, compare the sampled values, and export the selected image colors without leaving the page.
Color Wheel
The color wheel is useful when you want to work by hue. Drag around the outer ring to change the hue, then adjust the inner area to refine saturation and brightness while keeping the rest of the interface synchronized.
Color Shades, Tints, and Tones
Shades mix the selected color with black, tints mix it with white, and tones move the color toward gray. These variations are useful for hover states, borders, backgrounds, disabled states, and layered interface surfaces.
Color Harmonies
Harmony palettes are built from relationships on the color wheel. Analogous, complementary, split complementary, triadic, tetradic, and square combinations give you fast starting points for brand palettes, UI accents, data colors, and illustration systems.
Color Spaces
RGB describes screen colors through red, green, and blue light. HSL separates hue, saturation, and lightness, making it easier to adjust a color by feel. HSV is common in visual pickers because it maps naturally to saturation and value. OKLCH is designed to feel more even to human vision, which helps when building modern CSS palettes.
Hex Codes
Hex codes are compact, easy to copy, and widely supported in browsers and design tools. Because Hex and RGB describe the same red, green, and blue channels, a color can be converted between the two without changing its appearance.
Exporting Color Codes
Export panels collect the visible palette into formats for Tailwind, Figma, CSS variables, prefixed color functions, and plain code lists. Click a swatch to copy one color, or use the export button when you need the full group.
WCAG and Accessibility
Readable color combinations depend on contrast. The contrast checker compares the selected color against light and dark backgrounds so you can choose text, border, and surface colors with accessibility in mind.
Color Blindness Simulator
The simulator previews how the current color may shift for common color vision conditions. It helps you avoid palettes that rely only on hue differences and encourages stronger contrast, labels, and secondary visual cues.
Dark and Light Mode Theming
Shades, tints, tones, and harmony palettes can become the base for dark and light themes. Start with one color, check the surrounding variations, then export the values that work for backgrounds, foregrounds, buttons, and emphasis states.
Using the Color Wheel
The color wheel is a visual way to understand how colors relate to one another. It arranges hues around a circle, making it easier to choose a base color, compare nearby colors, and build balanced palettes from predictable relationships.
What Is a Color Wheel?
A color wheel places red, orange, yellow, green, blue, and violet around a circular spectrum. Colors that sit close together usually feel related and gentle, while colors across the wheel create stronger contrast and more energy.
How to Use This Color Wheel
Drag around the wheel to choose a hue, then adjust the color inside the picker to refine saturation and brightness. The current color updates the Hex, RGB, HSL, HSV, and OKLCH values, the top palette, the harmony swatches, and the export panels.
Primary Colors
Primary colors are the starting points for many color systems. In traditional art theory they are red, yellow, and blue. On screens, RGB color uses red, green, and blue light to create the colors used in websites, apps, and digital design tools.
Secondary Colors
Secondary colors are created by mixing two primary colors. In a traditional wheel, orange, green, and violet sit between the primary colors and help connect warm, cool, and neutral-feeling palettes.
Tertiary Colors
Tertiary colors sit between primary and secondary colors. They include combinations such as yellow-orange, red-orange, red-violet, blue-violet, blue-green, and yellow-green, giving a palette more nuance than the basic six-color wheel.
Warm and Cool Colors
Warm colors such as red, orange, and yellow often feel active, bright, and attention-grabbing. Cool colors such as blue, green, and violet can feel calmer and more spacious. A strong palette often uses one temperature as the base and the other as an accent.
Complementary Colors
Complementary colors sit opposite each other on the wheel. They create high contrast and are useful for buttons, highlights, badges, and places where an element needs to stand out from the surrounding interface.
Analogous Colors
Analogous palettes use neighboring colors on the wheel. Because the hues are close together, the result usually feels smooth, natural, and easier to control across backgrounds, cards, charts, and illustration details.
Triadic Colors
Triadic palettes use three hues spaced evenly around the wheel. They can create a vivid but balanced scheme when one color leads and the other two are used more sparingly for accents or supporting elements.
Split Complementary Colors
A split complementary palette starts with one base color, then uses the two colors next to its direct complement. This gives strong contrast like a complementary scheme, but with a softer and more flexible range.
Tetradic and Square Colors
Tetradic and square palettes use four colors around the wheel. They are useful when a design needs several accent colors, but they work best when one color is dominant and the rest are balanced through lighter tints or darker shades.
Shades, Tints, and Tones
After choosing a hue relationship, use shades, tints, and tones to make the palette practical. Lighter tints can become backgrounds, darker shades can become text or borders, and muted tones can support secondary UI states.
Building a Color Scheme
Start with the main color, choose a harmony type, then test the result against real interface needs. A complete scheme usually includes a primary color, one or two accents, neutral surfaces, readable text colors, and contrast-safe states.
Exporting Wheel Colors
When the palette feels right, export the colors as CSS variables, Tailwind values, Figma-friendly objects, prefixed color functions, or plain code lists. The same selected color can also be copied directly from any visible swatch.
Accessibility and Contrast
Color harmony does not guarantee readability. Check contrast for text and important controls, avoid relying on color alone, and use the simulator to preview how the palette may change for common color vision conditions.