Convert color codes
#RRGGBB format. Most commonly used in CSS
Red, Green, Blue (0-255)
Hue, Saturation, Lightness. Intuitive color adjustment
Hue, Saturation, Value. Used in graphic tools
Perceptually uniform modern CSS color space
Includes alpha (transparency) channel
A Color Picker is an essential tool for designers and developers that allows you to select, preview, and convert colors between multiple color formats. Colors on the web and in digital design are represented using various color models — HEX codes for CSS, RGB for screen displays, HSL for intuitive hue/saturation adjustments, HSV for graphic design tools, and OKLCH for perceptually uniform modern CSS. This tool provides instant bidirectional conversion between all these formats, along with an interactive color selector, palette generator, and random color feature — all running in your browser with no data uploaded.
Select a Color
Drag the color slider or click in the color well to select the color you want. Alternatively, you can directly enter HEX code, etc.
Check format
Selected colors are automatically converted and displayed in all formats including HEX, RGB, HSL, HSV, and OKLCH.
Transparency control
In the Alpha tab, you can create a translucent color by adjusting the transparency from 0 to 100%.
Copy code
Click the value in the color format you need to copy it automatically. Then paste it directly into CSS, a design tool, or another destination.
HEX is a hexadecimal notation of the form #RRGGBB, most commonly used in CSS. RGB expresses colors as a combination of red (0-255), green (0-255), and blue (0-255). HSL is closest to human intuition by expressing color (Hue, 0-360), Saturation (0-100%), and Lightness (0-100%).
OKLCH is a modern, perceptually uniform CSS color space. In HSL, colors can appear to have different brightness even at the same saturation and lightness. OKLCH addresses this and helps create consistent palettes. It is included in CSS Color Level 4.
The alpha value represents the transparency of the color, ranging from 0 (completely transparent) to 1 (completely opaque). In CSS, it is used like rgba(59, 130, 246, 0.5), and in HEX, add 2 digits to the end like #3B82F680. Used for overlays, shadows, backgrounds, etc.
According to WCAG 2.1 guidelines, the contrast ratio between text and background should be at least 4.5:1 for regular text and 3:1 for large text. When choosing colors, it is important to check the contrast with the background color to ensure that even visually impaired people can read.
If you enter HEX code copied from a design tool such as Figma or Sketch into this tool, it will be automatically converted to a format available in CSS, such as RGB or HSL. Managing it with the CSS variable is efficient when changing themes, and the HSL format makes it easy to adjust brightness/saturation.