Color Converter & Picker
Convert and pick colors in any format — hex, RGB, HSL, or HSV.
Sample Text
Small text sample
- oklch.com — Interactive OKLCH color picker with gamut visualization and CSS output.
How It Works
RGB (Red, Green, Blue) is the native color model for screens. Each channel ranges from 0–255, mixing additive light. White is 255,255,255; black is 0,0,0.
HSL (Hue, Saturation, Lightness) is more intuitive for humans — hue selects the color (0–360°), saturation controls intensity (0=grey, 100=vivid), and lightness goes from black (0) to white (100), with the pure color at 50.
HSV (Hue, Saturation, Value) is similar to HSL but Value controls brightness differently — at full value the color is its most vivid, not white. It's the model used by most visual color pickers, which is why it drives the square above.
Hex encodes RGB as three 2-digit hexadecimal pairs: #RRGGBB.
A fourth pair (#RRGGBBAA) adds the alpha channel. 3-digit shorthand
(#RGB) doubles each nibble.
OKLCH is a perceptually uniform color space introduced in CSS Color Level 4. L (lightness, 0–100%) and C (chroma, 0–0.4) behave consistently across hues — doubling L actually looks twice as bright, which isn't true in HSL. H is the same hue angle (0–360°). Because of gamut differences, some OKLCH values fall outside sRGB; those are clamped on conversion.
WCAG contrast measures the luminance difference between two colors.
AA Normal requires a 4.5:1 ratio for body text; AA Large requires 3:1 for large text (18pt+
or 14pt bold). AAA is stricter: 7:1 and 4.5:1. Relative luminance converts sRGB to linear
light using the formula 0.2126·R + 0.7152·G + 0.0722·B.
Related Tools
Frequently Asked Questions
How do I convert hex to RGB?
Split the hex code into three 2-digit pairs and convert each from hexadecimal to decimal. Example: #3b82f6 → R=0x3b=59, G=0x82=130, B=0xf6=246 → rgb(59, 130, 246). This tool converts automatically across all formats.
What is the difference between HSL and HSV?
Both use Hue and Saturation. HSL's Lightness goes from black (0%) through pure color (50%) to white (100%). HSV's Value goes from black (0%) to the most vivid version of the color (100%) — white is never reached by increasing Value alone. HSV is the model behind most visual color pickers.
What is OKLCH and why should I care?
OKLCH is a perceptually uniform color space available in CSS Color Level 4. Unlike HSL, equal steps in OKLCH Lightness look equally different to the human eye. It's ideal for generating accessible color palettes, tonal scales, and accessible contrast pairs.
What is WCAG contrast ratio and what does AA compliance mean?
WCAG (Web Content Accessibility Guidelines) defines contrast ratios for text legibility. AA compliance requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA is stricter: 7:1 and 4.5:1. Use this tool to check any text/background color combination.