Color Hex Converter
Pick, convert, and generate color palettes. Get HEX, RGB, and HSL values instantly — all in your browser.
About Hex Colors
Hex color codes (#RRGGBB) represent colors as three pairs of hexadecimal digits — red, green, and blue. Values range from 00 (0) to FF (255), giving 16.7 million possible colors. See also: MDN hex-color reference. Read more: Color Picker Tools for Modern Web Design.
Shorthand (#RGB) expands to #RRGGBB — e.g., #F80 = #FF8800. Modern CSS also supports #RRGGBBAA for alpha. To create gradient backgrounds from your colors, use the CSS Gradient Generator.
Color Models
- HEX — Compact notation used in CSS and design tools
- RGB — Red, green, blue channels (0–255 each)
- HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%)
Palette Theory
- Complementary — Opposite hues; maximum contrast
- Triadic — Three hues 120° apart; vibrant and balanced
- Analogous — Adjacent hues; harmonious and calm
- Shades/Tints — Same hue at different lightness levels
Frequently Asked Questions
What is the difference between HSL and HSB/HSV?
HSL (Lightness) and HSB/HSV (Brightness/Value) are similar but differ at the extremes. In HSL, 50% lightness is "pure" color. In HSB, 100% brightness with 100% saturation is "pure" color. CSS uses HSL.
How do I ensure accessible color contrast?
WCAG requires at least 4.5:1 contrast ratio for normal text and 3:1 for large text. Use a dedicated contrast checker — lightness difference alone isn't sufficient (e.g., yellow on white fails despite light/dark separation).
Why does the color picker show a different shade?
Browser color pickers operate in sRGB. If your monitor uses a wide-gamut color profile (P3, Rec2020), on-screen color may look richer than the sRGB hex value indicates.
Can I use HSL in CSS?
Yes — CSS supports hsl(hue, saturation%, lightness%) and the modern hsl(h s% l%) syntax. It's often easier to create color schemes in HSL because hue rotation is predictable.