Current color
#6366F1
CSS
color: #6366F1;color: rgb(99, 102, 241);color: hsl(239, 84%, 67%);Lightness shades
This tool converts between HEX (#RRGGBB), RGB (red, green, blue 0-255), HSL (hue, saturation, lightness), and HSV (hue, saturation, value) color formats.
HSL (Hue, Saturation, Lightness) is commonly used in CSS. HSV (Hue, Saturation, Value) is used in design tools like Photoshop and Figma. Both describe color in a more intuitive way than RGB.
A HEX color code is a 6-digit hexadecimal number preceded by '#' (e.g. #FF5733). The first two digits represent red, next two green, and last two blue β each ranging from 00 to FF.
CSS supports all formats: color: #FF5733; or color: rgb(255, 87, 51); or color: hsl(11, 100%, 60%); β enter any value and copy the format you need.
Screens have different color profiles (sRGB, Display P3, etc.) and calibration. A color like #FF5733 is specified precisely, but how it appears depends on the display hardware and color management settings. Design for sRGB for maximum compatibility.
The alpha channel controls transparency. In rgba(255, 87, 51, 0.5), the last value (0β1) sets 50% opacity. In 8-digit HEX #FF573380, the last two digits (00βFF) set opacity from fully transparent to fully opaque.
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1. Use a contrast checker to verify your foreground and background color pair meets the standard your project targets.
Color format conversion is a constant task in web development and design. CSS uses HEX and RGB, design tools use HSL and HSV, and different APIs expect different formats. This tool converts instantly between all four formats so you never need to calculate manually.
Enter a color value
Type a HEX code (#FF5733 or FF5733), RGB values (255, 87, 51), HSL values (11Β°, 100%, 60%), or HSV values (11Β°, 80%, 100%). All other formats update instantly.
Use the color picker
Click the color picker to select a color visually. The picker updates all four format fields simultaneously with the selected color's values.
Browse lightness shades
The shade strip below the picker shows a range of lightness variants of the current hue β useful for choosing hover states, borders, and background tints in a consistent color scheme.
Copy the format you need
Click the copy icon next to any format to grab that specific representation. Copy the CSS-ready format directly into your stylesheet or design token.
Convert design tool colors to CSS
Figma and Sketch often work in HSL. Your CSS might need HEX or RGB. Paste the color from your design tool and copy the CSS-ready equivalent without manual calculation.
Find accessible color variations
Use the lightness shade strip to find lighter or darker variants of your brand color for hover states, disabled states, and backgrounds that maintain visual hierarchy.
Decode colors from API responses
Some APIs return color values in HSV or as decimal RGB (0.0β1.0). Paste those values and convert to the CSS HEX format your frontend needs.
Web colors are expressed in multiple formats that each serve different purposes. HEX (#1A2B3C) is the most compact form and what HTML and CSS historically use. RGB (0β255 per channel) maps directly to how display hardware mixes light. HSL (hue 0β360Β°, saturation 0β100%, lightness 0β100%) is intuitive for designers because it matches how humans perceive color relationships. HSV replaces lightness with a value axis that better represents brightness.
Converting between formats is a constant need in frontend development: a design tool gives you HSL, a CSS property expects HEX, and an API returns RGB. This tool converts a color entered in any format to all four representations simultaneously, with a live color picker for visual selection. All conversion math runs locally in your browser β no color data is transmitted anywhere.