Color HEX/RGB Generator & Picker
Colors on the web are represented in multiple formats: HEX (hexadecimal like #FF5733), RGB (red, green, blue values from 0-255), and HSL (hue, saturation, lightness). Each format has its use cases — HEX is compact for CSS, RGB is intuitive for mixing, and HSL is natural for adjusting brightness and saturation.
This tool lets you generate, pick, and convert colors between all three formats in real-time. It also calculates WCAG contrast ratios against white and black backgrounds, helping you ensure your color choices meet accessibility standards (AA and AAA levels).
How it works
HEX to RGB: parse pairs of hex digits as decimal 0-255. RGB to HSL: normalize RGB to 0-1, compute hue from max channel, saturation from chroma/lightness, lightness as (max+min)/2. WCAG contrast ratio: (L1 + 0.05) / (L2 + 0.05) where L is relative luminance.
Use cases
- Converting colors between HEX, RGB, and HSL formats for CSS
- Checking color accessibility against WCAG AA/AAA standards
- Finding complementary, analogous, and triadic color harmonies
- Generating random colors for design inspiration
Frequently asked questions
How do I convert a HEX color code to RGB?
A HEX code like #FF5733 is three pairs of hexadecimal digits, one pair per channel. Convert each pair to decimal: FF = 255 (red), 57 = 87 (green), 33 = 51 (blue), giving rgb(255, 87, 51). This tool does the conversion instantly in both directions.
What is the difference between HEX, RGB, and HSL color formats?
All three describe the same colors in different ways. HEX is a compact six-digit code widely used in CSS, RGB expresses the red, green, and blue channels as values from 0 to 255, and HSL describes a color by hue, saturation, and lightness. HSL is usually the easiest format for making a color lighter, darker, or more muted.
What contrast ratio do I need to pass WCAG AA?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text. This tool computes the ratio of your color against white and black backgrounds using the formula (L1 + 0.05) / (L2 + 0.05), where L is relative luminance.
How do I make a color lighter or darker without changing its hue?
Work in HSL and adjust only the lightness value while keeping hue and saturation fixed. Raising lightness moves the color toward white and lowering it moves it toward black, without shifting the underlying tone. Doing the same in RGB is harder, since you would need to scale all three channels proportionally.
What are complementary, analogous, and triadic color harmonies?
They are relationships between hues on the color wheel. A complementary color sits directly opposite (180 degrees away) and creates strong contrast, analogous colors sit next to each other and feel harmonious, and a triadic scheme uses three hues spaced 120 degrees apart for a balanced yet vivid palette. This generator can suggest all three from any starting color.