Color input
Quick presets
Enter a hex color code or pick from presets to instantly get RGB, HSL, HSB values, and CSS-ready output.
Quick presets
— — — — — — — — Contrast info
A hex color code (#RRGGBB) has three pairs of hex digits representing Red, Green, and Blue channels. Convert each pair from base-16 to base-10. Example: #FF5733 → R: FF = 255, G: 57 = 87, B: 33 = 51 → rgb(255, 87, 51). For 3-digit shorthand (#RGB), expand each digit by doubling it: #F53 → #FF5533.
RGB (Red, Green, Blue) describes colors by mixing light channels — how much red, green, and blue. HSL (Hue, Saturation, Lightness) describes colors in a more human-intuitive way: hue is the color wheel position (0°–360°), saturation is color intensity (0%=grey, 100%=vivid), lightness is brightness (0%=black, 50%=pure color, 100%=white). HSL is easier for adjusting brightness or creating color palettes.
HSB (Hue, Saturation, Brightness) — also called HSV (Hue, Saturation, Value) — is similar to HSL but uses Brightness/Value instead of Lightness. The key difference: in HSL, a color at 100% lightness is always white. In HSB, a color at 100% brightness with 0% saturation is white, but at 100% saturation it's the pure vivid color. HSB is used in Photoshop, Figma, and most design software color pickers.
The alpha channel controls transparency. 0 = fully transparent, 1 = fully opaque. In CSS: rgba(255, 87, 51, 0.5) is 50% transparent. Hex colors can include alpha as an 8-digit code: #FF573380 (the last two digits are the alpha in hex, 80 ≈ 50%). The CSS color() function and oklch() also support alpha.
3-digit hex (#RGB) is a shorthand for 6-digit codes where both digits in each pair are the same. #ABC = #AABBCC, #F00 = #FF0000 (pure red), #FFF = #FFFFFF (white). Not all colors can be expressed in 3-digit form — only those where R, G, and B each have two identical hex digits. Both are valid CSS.
Modern CSS supports several color formats: hex (#FF5733), rgb(255, 87, 51), rgba(255, 87, 51, 0.5), hsl(11, 100%, 60%), hsla(11, 100%, 60%, 0.5), and newer formats like oklch(0.65 0.22 31) and color(display-p3 1 0.34 0.2). oklch and display-p3 are the future — they support wider color gamuts beyond sRGB and are supported in all modern browsers.
Install Calculatory
Add to your home screen for offline access and faster opening.