Color Picker
Find any color and its shades, tints, tones and harmonies. Enter Hex, RGB, or HSL—copy codes and check WCAG contrast instantly.
Color Picker Guide
Everything You Need to Know
Hex Color Codes
A hex color code is a six-character string prefixed with # that encodes red, green, and blue values in hexadecimal — base-16 notation that uses digits 0–9 and letters A–F. The format is #RRGGBB, where each pair represents one color channel ranging from 00 (none) to FF (full intensity).
How hex-to-RGB conversion works
Every pair of hex digits maps directly to a decimal number between 0 and 255. #FF0000 is pure red: red channel at 255, green and blue at 0. #1A2B3C decodes to RGB(26, 43, 60). Our converter handles this instantly — just enter any hex or RGB value in the picker above.
Shorthand hex codes
When both digits in each pair are identical, you can shorten the code to three characters: #AABBCC becomes #ABC. Browsers and design tools expand these automatically. Full six-digit codes are preferred in production for clarity.
Color Shades, Tints & Tones
When you start with a single base color, you can derive an entire range of related colors by mixing in black, white, or gray. These three techniques — shading, tinting, and toning — are the backbone of professional color palettes, design systems, and Tailwind-style scales.
Shades
+ black
Mix the base color with increasing amounts of black (0–90 %). Shades add depth, visual weight, and contrast — ideal for hover states, shadows, and establishing hierarchy.
Tints
+ white
Mix the base color with increasing amounts of white (0–90 %). Tints produce lighter, softer variants suited for backgrounds, borders, and accessible text on dark surfaces.
Tones
+ gray
Mix the base color with increasing amounts of gray (0–90 %). Tones desaturate and mute a color, creating sophisticated, calm palettes without changing the hue.
Color Harmonies
Color harmonies are structured combinations of colors derived from their geometric relationships on the color wheel. Because they respect the underlying math of hue distance, harmonious palettes feel natural and balanced without requiring a design degree.
Complementary
Two colors directly opposite each other (180°). High contrast; great for call-to-action emphasis.
Analogous
Three colors adjacent on the wheel (±30°). Calm and cohesive; popular for backgrounds and UI themes.
Triadic
Three colors evenly spaced at 120°. Vibrant and balanced — strong choice for brand identities.
Tetradic / Rectangle
Four colors forming a rectangle on the wheel. Richest variety; needs a dominant color to stay grounded.
Split-Complementary
A base color plus the two neighbors of its complement. High contrast with less tension than pure complementary.
Square
Four colors evenly spaced at 90°. Even contrast distribution; pairs well with neutral backgrounds.
Color Spaces Explained
A color space is a mathematical model that defines how colors are represented, mixed, and communicated. Choosing the right color space depends on whether you are designing for screens, print, or accessibility-first workflows.
RGB — Red, Green, Blue
The native language of digital screens. Each channel (R, G, B) takes a value from 0 to 255, describing how much red, green, and blue light to mix. RGB values map directly to hex codes — it is the most universally supported format across browsers, design tools, and code.
HSL — Hue, Saturation, Lightness
HSL puts human intuition first. Hue is the color angle (0–360°), saturation controls how vivid the color is (0–100 %), and lightness controls how bright it is (0–100 %). Adjusting a single channel — say, decreasing lightness by 10 % — gives you a predictable result, making HSL ideal for systematic palette building in CSS.
HSV — Hue, Saturation, Value
Similar to HSL but uses Value (brightness) instead of Lightness. HSV is the model used by most color-picker UIs (including ours) because it maps intuitively to the two-dimensional saturation/brightness canvas — horizontal axis = saturation, vertical axis = value.
OKLCH — Perceptual Lightness, Chroma, Hue
OKLCH is a modern, perceptually uniform color space built on the OKLab model. Unlike HSL or RGB, two OKLCH colors with the same Lightness value will actually appear equally bright to the human eye. Chroma controls colorfulness (not saturation), and Hue works the same as in HSL. OKLCH is the color space of choice for CSS Color Level 4 and design tokens that must look consistent across P3 and sRGB displays.
CMYK — Cyan, Magenta, Yellow, Key (Black)
CMYK is a subtractive color model used in physical printing. Inks absorb (subtract) light rather than emit it. Each channel (0–100 %) represents ink concentration. Because CMYK's gamut is smaller than sRGB, colors that look vivid on screen may appear duller in print — always proof against a physical CMYK profile before going to press.
WCAG & Color Accessibility
The Web Content Accessibility Guidelines (WCAG) are an internationally recognised standard published by the W3C. They define minimum contrast ratios between foreground text and its background, ensuring content is legible for people with low vision or other visual impairments.
| Element | AA minimum | AAA (enhanced) |
|---|---|---|
| Small text (< 18 pt / 14 pt bold) | 4.5 : 1 | 7 : 1 |
| Large text (≥ 18 pt / 14 pt bold) | 3 : 1 | 4.5 : 1 |
| UI components & graphics | 3 : 1 | — |
Beyond contrast ratios
Accessible color design goes further than meeting a contrast number. Avoid conveying information through color alone (pair it with icons or patterns), ensure interactive focus states are clearly visible, and test your palette against WCAG 2.1 and the upcoming WCAG 3.0 APCA (Advanced Perceptual Contrast Algorithm) for future-proof designs.
Color Blindness & Vision Simulation
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency (CVD). Designing without considering CVD can make interfaces confusing or entirely unusable for a significant portion of your audience.
Protanopia
1 % of menAbsence of red (L) cone cells. Reds appear very dark or black; greens appear yellow-green. Red–green contrasts that seem obvious to most people become nearly invisible.
Deuteranopia
1 % of menAbsence of green (M) cone cells — the most common form of CVD. Greens shift toward yellow; reds and greens appear similar. Affects the perception of traffic lights and data charts.
Tritanopia
< 0.01 % of populationAbsence of blue (S) cone cells. Blues appear green; yellows appear violet. Very rare but important to consider for blue-heavy brand palettes.
Achromatopsia
0.003 % of populationComplete absence of color vision — the world appears in shades of gray. Designs must rely entirely on value (lightness) contrast rather than hue difference.
cvdSimulation.ts) to show how your chosen color appears under each condition.Dark & Light Mode Theming
Modern products are expected to support both light and dark themes. Rather than defining two entirely independent palettes, the most maintainable approach is to derive your theme tokens from a single base color using shades and tints.
Token-based theming
Define semantic tokens — --color-background, --color-surface, --color-text, --color-primary — and map them to different points on your shade/tint scale depending on the active theme. A 600-shade might become your primary button in light mode, while the 400 variant serves the same role in dark mode to preserve contrast ratios.
Light Mode
Use dark shades for primary text and interactive elements. Reserve light tints (50–100) for backgrounds and surfaces. Ensure at least 4.5 : 1 contrast for body text.
Dark Mode
Use light tints for text and interactive elements on dark surfaces. Avoid pure white — a 95 % tint reduces eye strain. Keep saturation slightly lower to prevent colors from "glowing."