#6366F1
HEX
Presets
RGB
R
G
B
HSL
H
°
S
%
L
%
Copy values
HEX
#6366F1
RGB
rgb(99, 102, 241)
HSL
hsl(239, 84%, 67%)
RGB raw
99, 102, 241
HSL raw
239, 84%, 67%
Frequently asked questions
How do I convert HEX to RGB?
A HEX color like #6366F1 is three pairs of hexadecimal digits representing red, green, and blue: 63 = 99 red, 66 = 102 green, F1 = 241 blue, giving rgb(99, 102, 241). Type any HEX value into the input above and the RGB values update instantly.
How do I convert RGB to HSL?
HSL (Hue, Saturation, Lightness) is derived from RGB by finding the min and max channel values. Hue is the color angle (0–360°), Saturation is how vivid it is (0–100%), and Lightness is how bright it is (0–100% where 50% is a pure color). The sliders above let you adjust each value and see the HEX/RGB update live.
What is the difference between HEX, RGB, and HSL?
HEX is the most common format in CSS and design tools — it is compact and copy-paste friendly. RGB (red, green, blue) maps directly to how screens mix light. HSL is the most intuitive for humans — you can adjust lightness or saturation without touching the hue, making it great for generating color palettes and theming.
How do I use a color in CSS?
CSS accepts all three formats. Use hex: color: #6366F1; or rgb(): color: rgb(99, 102, 241); or hsl(): color: hsl(239, 84%, 67%);. HSL is particularly useful for CSS variables — you can tweak a single hue value to retheme an entire component.
What is color luminance?
Luminance is the perceived brightness of a color, calculated as 0.299×R + 0.587×G + 0.114×B. The tool uses this to automatically switch the overlay text between black and white depending on the background color, ensuring readable contrast.