Online Color Picker
Choose a color and opacity visually, convert it between popular color formats and copy ready-to-use CSS values.
- HEX
- RGB
- OKLCH
- CMYK
- HSV
- HSL
CSS examples
Pick a color and get its color codes
Use the FunRGB Color Picker to choose any color visually and instantly get its values in multiple color formats. The preview and every value update as you make changes.
Move the selector inside the color field to adjust saturation and brightness, then use the Hue slider to choose a different part of the color spectrum. You can also use the arrow keys while the color field is focused for precise adjustments; hold Shift to change the value in larger steps.
Use the Opacity slider to make the selected color transparent or semi-transparent. The checkerboard behind the color preview shows how much of the background remains visible.
The base color is displayed in HEX, RGB, OKLCH, CMYK, HSV and HSL formats, making it easy to use the same color in websites, applications, graphics and other design projects.
Generate and copy CSS color values
The CSS examples section generates complete declarations for text color, background color and border color. Use the Color format selector to switch every example between HEX, RGB, OKLCH and HSL syntax.
Opacity is included automatically in the generated CSS. Transparent HEX colors use an alpha channel, while RGB, OKLCH and HSL values use modern CSS alpha syntax.
Click inside an example field to select its entire value, or use the copy button to place the declaration directly in your clipboard.
Understanding color formats
Different tools and workflows use different ways to describe colors.
HEX is widely used in HTML and CSS and represents a color with a hexadecimal code such as #44B7A6. When opacity is used in CSS, two additional characters store the alpha channel.
RGB describes a color using its red, green and blue components and is commonly used for digital displays and CSS.
OKLCH describes perceptual lightness, chroma and hue, making color adjustments more visually consistent and predictable.
HSL represents hue, saturation and lightness, making it useful when you want to adjust colors programmatically.
HSV uses hue, saturation and value and is commonly used in visual color pickers.
CMYK represents cyan, magenta, yellow and black and is primarily associated with print-oriented color workflows. CMYK and HSV are shown as reference values but are not offered in the CSS examples because they are not standard CSS color syntaxes.