- Single Convert
- Batch Convert
Preview | Format | Result (Click to copy) |
---|---|---|
Name | ||
HEX | ||
HEX8 | ||
RGB | ||
RGB% | ||
HSL | ||
HSV | ||
HWB |
NO. | Input Value | Result | Status |
---|
Related Tools
The online CSS color convert tool supports color conversion between rgb, hex, hsl, hsv, hwb and other formats.
- Please enter or select a color value. Enter the supported color name, hex color, hex8 color, RGB color, RGBA color, HSL color, HSLA color, HSV color, HSVA color and HWB color.
- If the entered color value does not have a corresponding color name, the color name result is none.
- This tool additionally supports color value conversion in the following formats : sRGB Linear , HSLuv , OKLCh , OKLab , Okhsl , Okhsv , P3 , P3 Linear , REC.2020 Linear , REC.2020 , REC.2020-PQ , REC.2020-HLG , Absolute XYZ D65 , XYZ D65 (xyz) , XYZ D50 , Jzazbz , JzCzHz , ICTCP , ACEScg , ACEScc , Lab , LCh , ProPhoto , ProPhoto Linear , Adobe98RGB (a98rgb) , Adobe98RGB Linear(a98rgb-linear) , HCT , HPLuv , LChuv , Lab D65 , Luv , CMY , CMYK , YUV , YCbCr .
- YUV color format, Y value range is [0,1], U value range is [-0.436,0.436], V value range is [-0.615,0.615] .
- YCbCr color format, Y value range is [0,255], Cb value range is [-127.5,127.5], Cr value range is [-127.5,127.5] . If necessary, the values of Cb and Cr can be increased by 127.5 to adjust the range of Cb and Cr values to [0,255].
- CSS does not support hsv and hsva colors. This tool is only displayed as the conversion result.
- CSS properties related to color : color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, column-rule-color, print-color-adjust.
-
CSS color value introduction :
- Color Name : Color names are case insensitive identifiers that represent a specific color. such asred, black, white, transparent(represents a completely transparent color). The color name does not define transparency. If you use an unknown color name, the color name will not work.
-
RGB Color : Colors can be defined in two ways using the red green blue mode:
Hexadecimal characters prefixed with # and function ( rgb(), rgba() ) notations.
- Hexadecimal : #RRGGBB[AA] or #RGB[A]. R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0–9, A–F). A is optional. For example, #ff0000 is equivalent to #ff0000ff. The three-digit notation (#RGB) is a shorter version of the six-digit form (#RRGGBB). For example, #f09 is the same color as #ff0099. Likewise, the four-digit RGB notation (#RGBA) is a shorter version of the eight-digit form (#RRGGBBAA). For example, #0f38 is the same color as #00ff3388.
- Functional notations : rgb[a](R, G, B[, A]) or rgb[a](R G B[ / A]). R (red), G (green), and B (blue) can be either number or percentage, where the number 255 corresponds to 100%. A (alpha) can be a number between 0 and 1, or a percentage, where the number 1 corresponds to 100% (full opacity).
-
HSL Color : The HSL color model defines a given color in the sRGB color space
according to its hue, saturation, and lightness components. An optional alpha
component represents the color's transparency.
-
Functional notations : hsl[a](H, S, L[, A]).
H (hue) is an angle of the color circle given in degs, rads, grads, or turns in the CSS Color specification. When written as a unitless number, it is interpreted as degrees, as specified in the CSS Color Level 3 specification. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an angle, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.
S (saturation) and L (lightness) are percentages. 100% saturation is completely saturated, while 0% is completely unsaturated (gray). 100% lightness is white, 0% lightness is black, and 50% lightness is "normal".
A (alpha) can be a number between 0 and 1, or a percentage, where the number 1 corresponds to 100% (full opacity). - Functional notations : hsl[a](H S L[ / A]). CSS color level 4 supports values separated by spaces.
-
Functional notations : hsl[a](H, S, L[, A]).
-
HSV Color : HSV represents hue, saturation, and value.
Functional notations : hsv[a](H, S, V[, A]). -
HWB Color : Similar to HSL color model, the HWB color model defines a given color in
the sRGB color space according to its hue, whiteness and blackness components.
Same as HSL: H (hue) is an angle of the color circle given in degs, rads, grads, or turns in the CSS Color specification. When written as a unitless number, it is interpreted as degrees, as specified in the CSS Color Level 3 specification. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an angle, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.
W (whiteness) and B (blackness) are percentages. These two colors mix, so you would need 0% whiteness and 100% blackness to produce the color black. And vice versa 100% whiteness and 0% blackness for the color white. 50% of both values renders a mid grey and any other variations a shade of the hue specified.
A (alpha), optional, can be a number between 0 and 1, or a percentage, where the number 1 corresponds to 100% (full opacity). When specifying an alpha value it must be preceded with a forward slash (/).
Functional notations : hwb(H W B[ / A])。