Hex Color Picker

Hex Color Picker — HEX, RGB, HSL & CMYK Converter Online

Pick any color from the gradient canvas and instantly see every format you need: HEX, RGB, HSL, HSV, and CMYK codes — all updated in real time. No sign-up, no install, fully runs in your browser.

This is more than a basic color picker. It combines format conversion, shades and tints generation, color harmony exploration, and WCAG accessibility contrast checking into a single page — giving developers and designers everything needed to work with color without switching between tools.

How to Use the Hex Color Picker

1. Click or drag on the canvas — the gradient shows saturation on the X axis and brightness on the Y axis. Drag the crosshair to your target color.
2. Slide the hue spectrum — drag the rainbow strip below the canvas to shift between colors on the color wheel (0–360°).
3. Type a hex code directly — paste any 6-digit hex code like #1A73E8 into the HEX input and the picker jumps to that color.
4. Copy any format with one click — click the copy icon next to HEX, RGB, or HSL to copy the value to your clipboard.
5. Explore shades, tints, and harmonies — use the panels below to pick a variant or a harmonically related color.

What Are HEX, RGB, HSL, and CMYK?

Understanding the difference between color formats helps you choose the right one for each context.

HEX (#RRGGBB) is the most common format in web development. A 6-character code where each pair of hexadecimal digits (00–FF) represents the red, green, and blue channels. Example: #1A73E8 → R=26, G=115, B=232.

RGB (Red, Green, Blue) is the screen's native model. Each channel ranges from 0–255. CSS supports both rgb(26, 115, 232) and rgba() with an optional alpha channel for transparency.

HSL (Hue, Saturation, Lightness) is built for human intuition. Hue is the color angle on the wheel (0–360°), saturation is how vivid the color is (0–100%), and lightness is how bright it is (0–100%, where 50% is the pure color). It's the easiest format for adjusting colors systematically.

CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive model used in print. Screen colors (RGB) cannot always be exactly reproduced in CMYK — some vivid blues and greens fall outside the printable gamut.

Common Use Cases

• Web and UI development: Copy HEX or RGB codes directly into CSS, Tailwind config, or design tokens. The HSL format is particularly useful for building color scales programmatically.
• Accessibility audits: The WCAG contrast checker shows whether your color meets the 4.5:1 ratio required for AA compliance, so you can catch issues before they reach production.
• Design system creation: Use the shades and tints panel to build a full color ramp from a single base color. Click any swatch to load it and copy its code.
• Color harmony exploration: Switch between complementary, analogous, triadic, split-complementary, and tetradic harmonies to find palette combinations that work together.
• Print preparation: The CMYK values show how your screen color will translate to print pigments — useful when coordinating digital and physical materials.

Frequently Asked Questions

What is a hex color code and how do I read it?

A hex color code is a 6-digit hexadecimal representation of an RGB color in the format #RRGGBB. Each pair of digits represents one color channel: RR for red, GG for green, BB for blue. Values range from 00 (none) to FF (maximum, equal to 255 in decimal). For example, #FF0000 is pure red, #000000 is black, and #FFFFFF is white.

How do I convert RGB to HEX?

Convert each RGB value (0–255) to a 2-digit hexadecimal number, then concatenate them with a # prefix. Example: rgb(255, 107, 53) → Red: 255=FF, Green: 107=6B, Blue: 53=35 → #FF6B35. This color picker converts between all formats automatically as you pick or type.

What is the difference between HSL and HSV?

Both use Hue and Saturation, but the third axis differs. HSL uses Lightness: 0% is black, 100% is white, and 50% is the pure color. HSV uses Value/Brightness: 0% is black, and 100% at full saturation is the pure color. Photoshop and most design tool color pickers use HSV internally; CSS uses HSL. This picker shows both simultaneously.

What is WCAG color contrast and why does it matter?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background to ensure readability for users with visual impairments. WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt+). WCAG AAA requires 7:1. Failing to meet these standards can make content inaccessible and may create legal liability in jurisdictions with digital accessibility laws.

What are shades and tints?

Shades are darker versions of a color, created by mixing the color with black (decreasing HSL lightness). Tints are lighter versions, created by mixing with white (increasing lightness). The shades and tints panel shows 10 gradations in each direction from your selected color. Click any swatch to load it.

How do I find the nearest CSS named color?

CSS defines 148 named colors — keywords like coral, royalblue, rebeccapurple — that work directly in stylesheets. The picker shows the nearest CSS named color to your selection, calculated by Euclidean distance in RGB space. It's a useful reference when you want to use a semantic color name instead of a hex code.

Resources

• MDN Web Docs — CSS Color Values — Complete reference for all CSS color formats including HEX, RGB, HSL, HWB, and LCH.
• WCAG 2.1 — Understanding Contrast (Minimum) — Official W3C documentation on the 4.5:1 contrast requirement for AA compliance.
• W3Schools — HTML Color Names — Full reference table of all 148 CSS named colors with their hex equivalents.