Design Tools

Color Picker & Converter

Pick colors and convert between HEX, RGB, HSL, and HSB formats. Visual picker with live preview and copy support.

Your data never leaves your browser — nothing is sent to any server.

#6366F1
RGB
r
g
b
HSL
h°
s%
l%
#6366F1
White TextAA Large (4.5:1)
Black TextAA (4.7:1)
HEXcolor: #6366f1;
RGBcolor: rgb(99, 102, 241);
HSLcolor: hsl(239, 84%, 67%);
How to use
  1. 1

    Pick a color visually

    Use the native color picker input to select a color from the visual palette. The selected color updates all format fields and the preview instantly.

  2. 2

    Edit in any format

    Type a HEX code, adjust RGB channel values (0–255), or set HSL values (hue, saturation, lightness). All other formats sync in real time.

  3. 3

    Check contrast accessibility

    Review the contrast preview panel showing your color against white and black text. The WCAG compliance badge tells you if the combination meets AA or AAA standards.

  4. 4

    Copy the format you need

    Click the copy button next to any format field or CSS output line. The value is copied to your clipboard and a confirmation toast appears.

Common errors

HEX input not updating the preview

Make sure your HEX value is a valid 6-character code (e.g. #3b82f6). The tool requires exactly 6 hex digits after the # symbol. Shorthand like #fff is not supported — use #ffffff instead.

RGB values clamped unexpectedly

RGB channels must be between 0 and 255. Values outside this range are automatically clamped. If you're pasting from another tool, verify the values fall within the valid range.

Contrast badge shows 'Fail'

A 'Fail' result means the contrast ratio between your color and the text color is below 3:1, which does not meet any WCAG guideline. Consider making the color darker for white text or lighter for black text to improve accessibility.

FAQ (6)
What is the difference between HEX, RGB, and HSL color formats?

HEX uses a six-character hexadecimal string (#RRGGBB) to represent red, green, and blue channels. RGB uses decimal values from 0 to 255 for each channel — rgb(255, 0, 0) is pure red. HSL describes color by Hue (0–360°), Saturation (0–100%), and Lightness (0–100%), making it more intuitive for adjusting brightness and vibrancy. All three formats represent the same color space and can be converted losslessly between each other.

How does the contrast ratio checker work?

The contrast ratio is calculated using the WCAG 2.1 relative luminance formula. It compares the luminance of your selected color against white (#FFFFFF) and black (#000000) text. A ratio of 4.5:1 or higher passes WCAG AA for normal text, 3:1 passes AA for large text, and 7:1 passes the stricter AAA standard. This helps you ensure your color choices are accessible to users with visual impairments.

Can I enter colors by typing values instead of using the picker?

Yes. Every format has editable input fields. You can type a HEX code directly (e.g. #ff6600), enter individual RGB channel values (0–255), or set HSL values (hue 0–360, saturation and lightness 0–100). Changing any field instantly updates all other formats and the visual preview.

Is my color data sent to any server?

No. All color conversions and contrast calculations run entirely in your browser using JavaScript. No data is transmitted to any server. The tool works offline once the page is loaded.

Why do HSL values sometimes differ slightly from other tools?

HSL conversion involves floating-point arithmetic, and different tools may round differently. This tool rounds hue to the nearest integer degree and saturation/lightness to the nearest integer percentage. The visual difference is imperceptible — sub-degree or sub-percent variations are invisible to the human eye. If you need exact precision, use the HEX or RGB format as your source of truth.

What does the CSS output section do?

The CSS output section shows ready-to-use CSS declarations for your selected color in all three formats: color: #hex;, color: rgb(...);, and color: hsl(...);. You can copy any of them with one click and paste them directly into your stylesheet. This saves you from manually formatting the values.

Learn more

Color Picker & Converter — HEX, RGB, and HSL Online

Color is one of the most fundamental building blocks of web design and front-end development. Every CSS stylesheet, design token file, and UI framework relies on color values to define the visual identity of an application. Yet working with colors across different formats — HEX codes in stylesheets, RGB values in design tools, HSL for programmatic adjustments — creates friction. This Color Picker & Converter tool eliminates that friction by providing instant, bidirectional conversion between all three major CSS color formats in a single interface.

Understanding Color Formats in CSS

The three dominant color formats in CSS each serve different purposes. HEX notation (#RRGGBB) is the most compact and widely used in stylesheets, Sass variables, and design tokens. Its six hexadecimal digits encode red, green, and blue channels in a format that's easy to copy, paste, and version-control. RGB (Red, Green, Blue) uses decimal values from 0 to 255, making it straightforward to understand channel intensity — rgb(255, 0, 0) is clearly maximum red with no green or blue. HSL (Hue, Saturation, Lightness) is the most human-intuitive model: hue is a degree on the color wheel (0° = red, 120° = green, 240° = blue), saturation controls vibrancy (0% = gray, 100% = full color), and lightness controls brightness (0% = black, 100% = white). HSL makes it trivial to create color variations — darken by lowering lightness, desaturate by lowering saturation — without touching the base hue.

Why Convert Between Formats?

Different contexts demand different formats. Design tools like Figma export colors as HEX by default. Tailwind CSS configuration files use HEX or RGB. CSS custom properties often use HSL for its composability — you can define a hue once and derive hover, active, and disabled states by adjusting saturation and lightness. JavaScript canvas APIs and WebGL shaders work with RGB arrays. Converting accurately between these formats — without rounding errors, off-by-one mistakes, or forgetting the percent sign on HSL — saves debugging time and ensures visual consistency across your application.

Accessibility and Contrast Ratios

Choosing a color isn't just about aesthetics. The Web Content Accessibility Guidelines (WCAG) 2.1 mandate minimum contrast ratios between text and background colors: 4.5:1 for normal text (AA level) and 7:1 for enhanced contrast (AAA level). Large text (18pt or 14pt bold) requires only 3:1 for AA compliance. This tool calculates contrast ratios against both white and black text, so you can immediately see whether your color choice meets accessibility requirements. Catching contrast failures during development is far cheaper than fixing them after a design review or accessibility audit.

Color in Modern Design Systems

Design systems like Material Design, Radix Colors, and Tailwind's default palette define colors as scales — a base hue with 10 or more lightness steps. Building these scales often starts with an HSL-based approach: pick a hue, set saturation, then generate steps by varying lightness from 5% to 95%. Understanding the HSL model and being able to convert freely between formats is essential for anyone building or extending a design system. This tool provides the conversion foundation needed to work with any color scale methodology.

CSS Output for Rapid Prototyping

The CSS output section generates ready-to-paste declarations in all three formats. Whether your project uses HEX in Sass variables, RGB in CSS custom properties, or HSL for dynamic theming, you can copy the exact syntax you need. No manual formatting, no syntax errors, no forgotten semicolons. This is particularly useful during rapid prototyping when you're iterating on color choices and need to update stylesheets quickly.

Privacy and Performance

All color math — hex parsing, RGB-HSL conversion, luminance calculation, and contrast ratio computation — runs entirely in your browser. No color data is sent to any server. The conversion functions are pure arithmetic with no external dependencies, so they execute in microseconds. The tool works offline once loaded and has zero impact on your network traffic.