Displays the color from the input color code
Enter a color value defined in CSS, e.g. #ff0000, red, rgb(255 0 0), hsl(0 100% 50%), etc.
The specified color will be displayed here
URL for the above color
Transition:
How to use this tool
- This online tool displays the color from the color code you enter (There are no other special features).
- You can enter a color value in any format defined by CSS: hex, function, or keyword.
- If the color value is invalid, an error message will be displayed. but since strict checking is not performed, it may be allowed to pass (in which case no reaction will occur).
- The URL displayed below the color box can be used to access that color directly.
- If you are repeatedly searching for strong colors, we recommend you set the transition time to 2 or 5 seconds to protect your eyes. On the other hand, if you want to see subtle color changes, try setting it to 0 seconds.
- To use this tool, you must enable JavaScript in your browser.
Color values
This tool supports the following color value formats.
| Format | Syntax | Example |
|---|---|---|
| Hexadecimal Colors | ||
| HEX | #RRGGBB #RGB |
#ff0000 #f00 |
| HEX with Alpha |
#RRGGBBAA #RGBA |
#ff000077 #f007 |
|
R: Red, G: Green, B: Blue, A: Alpha(Opacity) RGB: 00 - ff (0 - f), A: 00 - ff (0 - f) |
||
| RGB / RGBA Colors | ||
| RGB Modern |
rgb(R G B) rgb(R G B / A) |
rgb(255 0 0) rgb(100% 0% 0%) rgb(255 0 0 / 0.5) rgb(100% 0% 0% / 50%) |
| RGB Legacy |
rgb(R, G, B) | rgb(255, 0, 0) rgb(100%, 0%, 0%) |
| RGBA Legacy |
rgba(R, G, B, A) | rgba(255, 0, 0, 0.5) rgba(255, 0, 0, 50%) rgba(100%, 0%, 0%, 0.5) rgba(100%, 0%, 0%, 50%) |
|
R: Red, G: Green, B: Blue, A: Alpha(Opacity) RGB: 0 - 255 (0% - 100%), A: 0.0 - 1.0 (0% - 100%) |
||
| HSL / HSLA Colors | ||
| HSL Modern |
hsl(H S L) hsl(H S L / A) |
hsl(240 100% 50%) hsl(240 100% 50% / 0.5) hsl(240 100% 50% / 50%) |
| HSL Legacy |
hsl(H, S, L) | hsl(240, 100%, 50%) |
| HSLA Legacy |
hsla(H, S, L, A) | hsla(240, 100%, 50%, 0.5) hsla(240, 100%, 50%, 50%) |
|
H: Hue, S: Saturation, L: Lightness, A: Alpha(Opacity) H: 0 - 360, SL: 0% - 100%, A: 0.0 - 1.0 (0% - 100%) |
||
| HWB Colors | ||
| HWB | hwb(H W B) hwb(H W B / A) |
hwb(240 0% 40%) hwb(240 0% 40% / 0.5) hwb(240 0% 40% / 50%) |
|
H: Hue, W: Whiteness, B: Blackness, A: Alpha(Opacity) H: 0 - 360, WB: 0% - 100%, A: 0.0 - 1.0 (0% - 100%) |
||
| Device-independent Colors | ||
| Lab | lab(L a b) lab(L a b / A) |
lab(50 -62.5 62.5) lab(50% -50% 50%) lab(50 -62.5 62.5 / 0.5) lab(50% -50% 50% / 50%) |
|
L: Lightness, a: Hue(green-magenta), b: Hue(blue-yellow), A: Alpha(Opacity) L: 0 - 100 (0% - 100%), ab: -125 - 125 (-100% - 100%), A: 0.0 - 1.0 (0% - 100%) |
||
| LCH | lch(L C H) lch(L C H / A) |
lch(50 75 180) lch(50% 50% 180) lch(50 75 180 / 0.5) lch(50% 50% 180 / 50%) |
|
L: Lightness, C: Chroma, H: Hue, A: Alpha(Opacity) L: 0 - 100 (0% - 100%), C: 0 - 150 (0% - 100%), H: 0 - 360, A: 0.0 - 1.0 (0% - 100%) |
||
| OKLab | oklab(L a b) oklab(L a b / A) |
oklab(0.5 -0.2 0.2) oklab(50% -50% 50%) oklab(0.5 -0.2 0.2 / 0.5) oklab(50% -50% 50% / 50%) |
|
L: Lightness, a: Hue(green-magenta), b: Hue(blue-yellow), A: Alpha(Opacity) L: 0.0 - 1.0 (0% - 100%), ab: -0.4 - 0.4 (-100% - 100%), A: 0.0 - 1.0 (0% - 100%) |
||
| OKLCH | oklch(L C H) oklch(L C H / A) |
oklch(0.5 0.2 180) oklch(50% 50% 180) oklch(0.5 0.2 180 / 0.5) oklch(50% 50% 180 / 50%) |
|
L: Lightness, C: Chroma, H: Hue, A: Alpha(Opacity) L: 0.0 - 1.0 (0% - 100%), C: 0.0 - 0.4 (0% - 100%), H: 0 - 360, A: 0.0 - 1.0 (0% - 100%) |
||
| Color Keywords | ||
| Named | - | red, gray, olive, etc |
| System | - | ActiveText, Mark, Field, etc |
| Special | - | transparent, currentcolor |
* The above definition is current as of July 2024.
Reference list
The following sites are helpful for color values.