Color Code Converter
Colors in web development can be specified in multiple formats: hex, RGB, HSL, and named colors. This tool converts between all formats, displays a visual preview, calculates contrast ratios for accessibility, and generates complementary color palettes.
Specifications
Common Use Cases
- Convert designer-provided hex colors to HSL for easier manipulation
- Check if text color meets WCAG accessibility standards
- Generate color palettes for UI design
- Debug CSS color values that aren't rendering as expected
- Find the hex equivalent of CSS named colors
Features
- Parse hex (#RGB, #RRGGBB, #RRGGBBAA), RGB, RGBA, HSL, HSLA, and named colors
- Convert between all color formats instantly
- HEX8 output (8-digit hex with alpha)
- Visual color preview with dark/light background toggle
- Sample text preview on white and black backgrounds
- Calculate WCAG contrast ratio against black and white
- Light/dark color classification
- Generate complementary, analogous, triadic, tetradic, and monochromatic color palettes
- Show luminance and accessibility recommendations
Examples
Tips
- HSL is often easier to work with: H is the color, S is vibrancy, L is brightness.
- For accessible text, aim for at least 4.5:1 contrast ratio (WCAG AA).
- The 8-digit hex format (#RRGGBBAA) includes alpha transparency.
- CSS4 introduces new color spaces like oklch() for better perceptual uniformity.
Understanding Color Code
CSS color values define colors for web styling using several notation systems. The most common is hexadecimal (#RRGGBB), where each pair of hex digits represents the red, green, and blue channels from 00 (0) to FF (255). The shorthand #RGB doubles each digit (#F00 equals #FF0000). The 8-digit form #RRGGBBAA adds an alpha transparency channel.
Functional notations provide more intuitive color specification. RGB (rgb(255, 0, 0)) specifies channels as 0-255 integers or percentages. HSL (hsl(0, 100%, 50%)) uses hue (0-360 degree color wheel), saturation (0-100%), and lightness (0-100%), which many designers find more intuitive for creating color palettes and adjusting colors. Both RGB and HSL support alpha transparency with rgba() and hsla() or the modern syntax rgb(255 0 0 / 50%).
Color accessibility is a critical concern in web development. WCAG 2.1 defines minimum contrast ratios: 4.5:1 for normal text (Level AA), 3:1 for large text, and 7:1 for enhanced contrast (Level AAA). Insufficient contrast makes text difficult or impossible to read for users with low vision or color vision deficiencies.
CSS also supports 148 named colors (like rebeccapurple, cornflowerblue, tomato), the currentColor keyword, and newer color spaces like HWB (hue-whiteness-blackness), LAB, LCH, and OKLCH that provide perceptually uniform color manipulation. The newer spaces are particularly useful for generating harmonious color palettes and smooth gradients.
Hex (#FF0000) and RGB (rgb(255,0,0)) both specify red, green, and blue channel values — hex uses base-16 while RGB uses decimal integers. HSL (hsl(0,100%,50%)) represents color using hue (the color itself on a 0-360 degree wheel), saturation (intensity), and lightness (brightness), which many developers find more intuitive for creating variations. All three formats can represent the same colors, but HSL makes it straightforward to produce lighter, darker, or more muted variants by adjusting a single value.
The alpha channel controls transparency on a scale from 0 (fully transparent) to 1 (fully opaque). In hex notation, alpha is appended as two additional digits — #FF000080 represents 50% transparent red (80 hex = 128 decimal). In functional notation, the syntax is rgba(255,0,0,0.5) or the modern form rgb(255 0 0 / 50%). Alpha transparency is essential for overlays, watermarks, and layered UI elements. For WCAG compliance, Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular), while Level AAA requires 7:1 for normal text and 4.5:1 for large text. Non-text elements like icons, borders, and form controls need at least 3:1 contrast against adjacent colors.
LAB and OKLCH are perceptually uniform color spaces where equal numeric changes produce visually equal color differences, making them superior for generating palettes and smooth gradients. OKLCH (Lightness, Chroma, Hue) is particularly useful in CSS because adjusting lightness produces natural, predictable results. Both are supported in modern CSS with the oklch() and lab() functions.