Cat Toolbox
Help CatBlog About Partnership 中文

Color Converter

Convert between HEX, RGB, and HSL color formats with palette preview and quick color picker.

#3B82F6
217
91%
60%
Preset Palette (click to pick color)

FAQ

What's the difference between HEX, RGB, and HSL?
HEX is a hexadecimal color code (e.g., #FF0000), RGB represents colors using red, green, and blue components (e.g., rgb(255,0,0)), and HSL uses hue, saturation, and lightness (e.g., hsl(0,100%,50%)). HEX and RGB are suitable for computer displays, while HSL aligns better with human intuitive understanding of colors.

What do H, S, and L in HSL represent?
H (Hue): 0-360 degrees, determines color type (red 0/360, green 120, blue 240). S (Saturation): 0-100%, determines color vividness (0% is gray). L (Lightness): 0-100%, determines color brightness (0% is black, 100% is white). Adjusting S and L values makes it easy to get lighter or darker variations of the same color.

Related guide

Color Converter, Palette Extractor and Gradient Builder: What Each One Changes Without Telling You
All three colour pages accept what you give them and quietly rewrite it. The converter's HEX box parses a number, so #FF0000ff becomes #0000FF; its HSL box rounds, so 89.4% of colours do not survive a HEX→HSL→HEX round trip. The extractor analyses a 4000×3000 photo through five of its 4,000 columns, pins its first cluster centre to the top-left pixel, and reports a 1% accent as 100% because the white it sits on was filtered out. The gradient builder refuses a fifth stop. Every figure below was read out of the pages' own scripts or measured by driving them.

Advertisement