← Hashito System Home 日本語 Other tools
Input
How to use: Pick a color with the color picker, or type into any of the HEX, RGB, or HSL fields, and the three notations and the preview update on the right in real time. 3-digit HEX (e.g. #abc) is also supported.
Results
  • HEX
  • RGB
  • HSL
📖 We also offer free learning posters that illustrate how color and the three primary colors of light (RGB) work. Take a look at the learning posters as well.

Frequently Asked Questions (FAQ)

What is the difference between HEX and RGB?

HEX and RGB are two ways of writing the same combination of red, green, and blue light. HEX uses the #rrggbb form, expressing each channel as a 2-digit hexadecimal value (00 to ff), and is widely used in CSS and design tools. RGB uses the rgb(r, g, b) form, expressing each channel as a decimal value (0 to 255). For example, white is #ffffff in HEX and rgb(255, 255, 255) in RGB, which refer to exactly the same color.

What is HSL?

HSL describes a color by Hue (0 to 360 degrees), Saturation (0 to 100%), and Lightness (0 to 100%). Hue is the type of color (red, yellow, green, blue, and so on), saturation is how vivid it is, and lightness is how bright it is. Because it is intuitive for people to adjust, HSL is often used when building color schemes and themes. HSL can be converted internally to RGB, so the same color can also be expressed in HEX or RGB.

Is the color I enter sent to a server?

No. Entering a color and converting between HEX, RGB, and HSL all happen entirely in JavaScript inside your browser. The color or code you choose is never sent to or stored on a server.

📖 Free learning posters for students →