Find the exact color
Adjust hue, saturation and brightness, or paste a code, and copy the value as HEX, RGB, HSL, OKLCH or CMYK in one click.
Try it nowOnline color tools
Color picker, palettes and color codes in one place
Pick any color and copy its HEX, RGB, HSL or OKLCH code, build palettes with color harmonies, pull colors from a photo and check WCAG contrast.
Free and with no sign-up. Everything runs in your browser, so your images never leave your device.
Everything you need to work with color
Build palettes that work
Start from one color and apply harmonies from the color wheel: analogous, complementary, triadic or tetradic. Export to CSS, Tailwind or Figma.
Try it nowPull the colors out of a photo
Upload an image and get its dominant palette, or sample any pixel with the eyedropper. The image is processed in your browser.
Try it nowMake sure it is readable
Measure the contrast between text and background against WCAG 2.2 and see right away whether it passes AA and AAA.
Try it nowOver 900 palettes ready to use
Filter by color or by style (pastel, vintage, neon…), save your favorites and open any palette in the color wheel to fine-tune it.
Browse palettesFrom the first color to the final code
- HEX
- #E4572E
- RGB
- rgb(228, 87, 46)
- HSL
- hsl(14, 77%, 54%)
- OKLCH
- oklch(0.6372 0.1838 36.48)
- CMYK
- C0 M62 Y80 K11
1. Color codes in every format
The same color is written differently depending on where you use it. Try any color right here and copy the format you need.
HEX for the web
The most common format in CSS and design tools: six digits after the # sign.
RGB and HSL to fine-tune
RGB splits red, green and blue from 0 to 255. HSL works with hue, saturation and lightness, which makes variants easy.
OKLCH for modern scales
The newest CSS format: lightness changes look even to the eye, which is ideal for color scales.
2. Combinations that work
A good palette is not luck. It relies on the relationships between hues on the color wheel.
Color harmonies
Analogous for calm results, complementary for contrast, triadic for lively designs.
Mixes and gradients
Blend two colors to find the in-between tone, or build linear, radial and conic CSS gradients.
Tailwind and Material colors
Browse the official scales and preview them on real interface components.
3. Design for everyone
About 8% of men have some form of color blindness, and many screens are viewed in glare. Checking color is part of the design.
WCAG contrast
Calculate the ratio between text and background and check the AA and AAA levels for normal and large text.
Color blindness simulator
See your palette the way people with protanopia, deuteranopia, tritanopia or achromatopsia see it.
All Matizly tools
12 free tools that run in your browser and give you code ready to paste.
- Color pickerPick any color and copy Hex, RGB, HSL or OKLCH with shades, tints and harmonies.
- Color wheelExplore harmonies on an interactive wheel and build balanced palettes from one base color.
- Image colorsPull colors from any image and build palettes from a photo.
- Color mixerBlend two colors and get the mid result ready to copy.
- CSS gradientsBuild linear, radial or conic CSS gradients with a live preview.
- Color palettesBrowse ready-made palettes and save your favorites on this device.
- Color namesBrowse HTML/CSS named colors with ready-to-copy Hex, RGB and HSL values.
- Tailwind colorsBrowse Tailwind CSS and Material Design color tables.
- UI colorsPreview Tailwind color families on real UI components.
- WCAG contrastCheck WCAG contrast between text and background for more accessible UI.
- Color blindnessSee how your colors look under different types of color blindness.
- Hex ↔ RGBConvert Hex codes to RGB instantly for CSS, design tools and handoff.
Color codes by color family
A representative code for each color, and hundreds of palettes built around it.
- Red#E63946rgb(230, 57, 70)Red palettes →
- Orange#F4A261rgb(244, 162, 97)Orange palettes →
- Brown#8B5E3Crgb(139, 94, 60)Brown palettes →
- Yellow#FFD166rgb(255, 209, 102)Yellow palettes →
- Green#2A9D8Frgb(42, 157, 143)Green palettes →
- Turquoise#06D6A0rgb(6, 214, 160)Turquoise palettes →
- Blue#118AB2rgb(17, 138, 178)Blue palettes →
- Violet#7209B7rgb(114, 9, 183)Violet palettes →
- Pink#FFAFCCrgb(255, 175, 204)Pink palettes →
- Gray#6C757Drgb(108, 117, 125)Gray palettes →
- Black#000000rgb(0, 0, 0)Black palettes →
- White#FFFFFFrgb(255, 255, 255)White palettes →
Frequently asked questions
Open the color picker, or type the color in the “Try a color” field on this page (for example #E4572E, rgb(228, 87, 46) or tomato), and you will see its HEX, RGB, HSL, OKLCH and CMYK values. If the color is in a photo, use the image color picker.
They describe the same color. HEX uses six hexadecimal digits (#E4572E) and RGB uses three numbers from 0 to 255 (rgb(228, 87, 46)). You can convert between them without losing anything.
Start from one base color and use the color wheel to apply a harmony such as analogous, complementary or triadic. You can also browse ready-made palettes or extract one from a photo.
No. Every Matizly tool works directly in your browser without signing up.
No. All processing, including image analysis, happens in your browser. Nothing is sent or stored.
Yes. From the color wheel and the color picker you can export Tailwind CSS variables and Figma objects, or simply copy the codes.
Yes. The contrast checker calculates the WCAG ratio between two colors and tells you whether it passes AA and AAA.
Start working with color
Every tool is free and runs in your browser.