The ultimate color tool for designers and developers. Pick a color visually or enter values in any format - HEX, RGB, HSL, HSV, or CMYK - and see instant conversions to all other formats with ready-to-use CSS code.
color: #ff5733;background-color: rgba(255, 87, 51, 1);border-color: #ff5733;box-shadow: 0 2px 8px rgba(255, 87, 51, 0.3);Click the large color swatch to open the native color picker, or type a value directly into any format field (HEX, RGB, HSL, HSV, or CMYK). Changing any input instantly updates all other formats and the preview swatch. Adjust the alpha/opacity slider to create transparent colors (RGBA/HSLA). The CSS code section provides copy-ready color values in every format. The color harmonies section shows complementary, triadic, and analogous colors based on color theory. The tool also checks if your color matches a CSS named color (like 'coral' or 'steelblue').
A universal color picker is indispensable for web developers who need CSS color values in specific formats, UI/UX designers converting brand colors between design tools (Figma uses HEX, some APIs use RGB, print requires CMYK), front-end developers debugging color values in DevTools, graphic designers preparing assets for both web (RGB) and print (CMYK), accessibility specialists checking and adjusting colors for contrast compliance, email developers who need inline CSS colors, game developers converting between color spaces, and data visualization engineers choosing harmonious color palettes for charts and graphs.
Color conversion between spaces uses standard mathematical transformations. RGB to HSL conversion normalizes RGB values to 0-1, finds the max and min channels, calculates lightness as (max+min)/2, saturation based on lightness, and hue based on which channel is dominant. HSV (Hue-Saturation-Value, also called HSB) differs from HSL in that Value represents the brightness of the color rather than lightness. CMYK conversion from RGB is an approximation suitable for screen preview - accurate print CMYK requires ICC color profiles. The color harmonies use HSL hue rotation: complementary (+180°), triadic (+120°, +240°), and analogous (+30°, -30°). CSS named colors are matched against the 148 standard CSS color keywords defined in the CSS Color Module Level 4 specification.
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value/Brightness) are both cylindrical color models but differ in how they represent brightness. In HSL, 50% lightness gives the pure color, while 0% is black and 100% is white. In HSV, 100% value gives the brightest version of the color, and saturation controls how vivid it is. HSL is used in CSS; HSV is common in design tools like Photoshop.
The CMYK values shown are a mathematical approximation based on RGB-to-CMYK formulas. For professional print production, you need ICC color profile-based conversion using tools like Adobe Photoshop or Illustrator, as the actual CMYK values depend on the specific printer, paper, and ink being used.
Color harmonies are combinations of colors that are visually pleasing based on their positions on the color wheel. Complementary colors are opposite each other (180° apart), creating high contrast. Triadic colors are evenly spaced (120° apart) for vibrant balanced palettes. Analogous colors are adjacent (30° apart) for subtle, cohesive designs.
Transform, format, generate, and encode data instantly. Private, fast, and always free.
Browse All Tools