HEX
Best for CSS, design tokens and compact web color values. A six-digit value stores red, green and blue channels; the three-digit form is shorthand when each pair repeats.
Color Code: HEX, RGB and HSL Color Information
#FFFFFF
Explore color formats, shades, tints and harmonious combinations for your selected color.
← Back to Color Picker
#FFFFFF
Color Conversion
HEX#FFFFFF
RGB255, 255, 255
HSL0°, 0%, 100%
Shades & Tints
Shades are created by mixing the selected color with black. Tints are created by mixing it with white.
Shades
Tints
Color Combinations
Use these simple color harmonies to build balanced palettes around your selected color.
How to choose a color format
The same digital color can be written in several formats. The useful choice depends on where you will use the value: web styles, graphics code, or color adjustments.
RGB
Useful when you need the individual red, green and blue channels, such as canvas work, image processing or JavaScript. Each channel normally ranges from 0 to 255.
HSL
Useful when you want to reason about hue, saturation and lightness. It can make changes such as lightening a color or reducing saturation easier to describe.
From a picked color to CSS
color: #FFFFFF;A practical note about color values
HEX, RGB and HSL are different representations of the same digital color for ordinary opaque colors. They do not automatically create three different colors. For accessibility work, check the contrast between the final foreground and background colors rather than relying on the color format itself.
What is the difference between HEX and RGB?
HEX expresses the red, green and blue channels in hexadecimal notation, while RGB writes the same channels as decimal numbers from 0 to 255.
When is HSL useful?
HSL is convenient when adjusting hue, saturation or lightness because those properties are exposed directly instead of being encoded as three hexadecimal pairs.
Can I use these values in CSS?
Yes. HEX values such as #3366CC and RGB values can be used directly in CSS. HSL can also be used in modern CSS when you want hue, saturation and lightness controls.
Why check shades and tints?
They provide controlled lighter and darker variations that can help with hover states, surfaces, borders and secondary UI elements.
HEX, RGB and HSL Color Codes Explained
Use ColorPick to inspect a color in HEX, RGB and HSL and understand how the same digital color can be represented in different formats. Review shades, tints and related combinations before copying a value into CSS or a design specification.
HEX is convenient for web code, RGB is familiar for channel-based digital graphics, and HSL can make hue, saturation and lightness adjustments easier to reason about. These are different notations or views of digital color, not automatically different colors.