Step-by-step instructions
Useful when matching a UI color, checking a brand color, creating a CSS value or translating a color between common formats.
Pick or enter a color
Use the color control to select the shade you need. If the tool accepts a color value, you can start from a known HEX or equivalent value.
Review the color values
Check the generated HEX, RGB and HSL representations. These are different ways of describing the same color.
Choose the format your project needs
Use HEX for common CSS declarations, RGB when working with channel values, or HSL when adjusting hue, saturation and lightness.
Copy the value
Copy the required value directly from the tool.
Test it in the destination
Paste the value into your design or CSS and inspect it against the surrounding colors, text and accessibility requirements.
Practical tips
- Do not judge contrast from the color swatch alone; check text contrast where accessibility matters.
- Keep brand colors documented with their exact values.
- HSL can be convenient when creating lighter or darker variations of an existing color.
Frequently asked questions
What is HEX?
HEX is a compact hexadecimal representation commonly used for RGB colors in web development.
What is HSL?
HSL represents a color using hue, saturation and lightness, which can make certain visual adjustments easier to reason about.
Which format should I use in CSS?
Choose the representation that best fits your codebase. Modern CSS supports several color notations, including HEX, RGB and HSL.