HexaCalc: free hex color codes, converters and color tools
Type a color in any format and get every other format, its closest name and how readable text is on it. Then pick colors from photos, build palettes and check contrast, all in your browser.
Try
#0F766E
White text
Black text
- HEX
- RGB
- HSL
- HSV
- CMYK
- Lab
- OKLCH
- Name
Want the same color as a palette? Try it in the palette generator or the color wheel.
All tools
Pick
Grab exact colors from a photo, your camera, your screen or a picker.
- Hex color pickerPick a color on a saturation square and hue strip, then copy it as HEX, RGB, HSL, HSV, CMYK, Lab or OKLCH.
- Color picker from imageUpload, drop or paste a picture and click any pixel to read its HEX and RGB.
- Palette from imagePull 3 to 16 dominant colors out of any photo with k-means clustering in OKLab, sort them, and export the palette as CSS, Tailwind, JSON or a PNG card..
- Camera color identifierPoint your phone or webcam at an object and read the color under the crosshair: its nearest name, HEX code and RGB.
- Screen color pickerUse the browser EyeDropper to sample any pixel on your screen, even outside this tab.
Create
Build palettes, harmonies, gradients and shade ramps.
- Palette generatorPress the spacebar to generate color palettes, lock the swatches you like, pick a harmony rule, and export to CSS variables, Tailwind, JSON or PNG..
- Color wheelAn interactive color wheel picker: drag to choose a color and get complementary, analogous, triadic, split, tetradic or square harmonies, on the RGB or RYB wheel..
- Complementary colorsEnter any color to find its complement on both the RGB and RYB wheels, plus the split-complementary pair, contrast between them and a small design preview..
- Triadic colorsBuild a triadic color scheme from one color, nudge the spacing, balance lightness and saturation, and preview it in a 60-30-10 layout before you export..
- Monochromatic schemeTurn one hue into a monochromatic color scheme: evenly spaced OKLCH lightness steps, contrast grades for text on each step, and a live interface preview..
- Color mixerMix two to six colors by parts and compare three results: paint-like subtractive mixing (Kubelka-Munk via spectral.js), additive light, and a plain RGB average..
- BrownBrown comes from mixing all three primaries, or any two complements such as orange and blue.
- BlueBlue is a primary in paint, so red and yellow can never make it, but cyan and magenta can.
- GreenBlue and yellow make green; the blue you pick decides whether it is leafy, deep or neon.
- PurpleRed and blue make purple, but often a dull one.
- PinkPink is red or magenta lightened with white.
- OrangeRed and yellow make orange.
- GrayBlack and white make gray, but painters often mix it from complements for a livelier neutral.
- Color matcherEnter a color and get the colors that go with it: harmony partners, matching neutrals and text colors that pass contrast, shown on outfit and room swatches..
- Gradient generatorMake linear, radial and conic gradients with as many stops as you need, interpolate in OKLCH to avoid gray midpoints, and copy CSS or download a PNG..
- Tailwind color generatorGenerate a Tailwind CSS shade scale from 50 to 950 out of any HEX code, check contrast at every step, and copy a v4 @theme block or a v3 config object..
- Shades and tintsCreate tints, shades and tones of any color in 5 to 20 steps.
- Random color generatorGenerate random colors or whole palettes from your browser’s secure random source.
- Paint color visualizerPreview wall, feature wall, trim and ceiling colors in a room under north, south, evening and bulb light, with LRV and undertone for every color..
- Website color schemesBuild a website color scheme with primary, secondary, accent, neutral and surface roles, preview it on a landing page and dashboard, and audit contrast..
- Color mixing chartA paint color mixing chart: what two colors make, from primaries to secondaries, with HEX results from a Kubelka-Munk model and links to full recipes..
Check
Contrast, color blindness and color vision screening.
- Contrast checkerCheck text and background colors against WCAG 2.2 AA and AAA, see the APCA Lc value, preview real text and buttons, and get the nearest passing color..
- Color blindness simulatorSee an image or palette the way people with protanopia, deuteranopia, tritanopia or achromatopsia see it, using the Machado 2009 model, with a compare slider..
- Color blind testA free color blind test with Ishihara-style dot plates drawn fresh on each run.
- Types of color blindnessThe types of color blindness explained: protan, deutan and tritan forms plus achromatopsia, with how common each is and a scene you can view through each type..
- Hue testPut rows of color chips in hue order between two fixed ends, then see your error score and where on the hue circle you slipped.
Convert
Move one color between HEX, RGB, HSL, CMYK, OKLCH and more.
- HEX to RGBConvert 3, 4, 6 or 8 digit HEX codes to RGB and RGBA, see each pair worked out in base 16, and convert a whole list at once in bulk mode..
- RGB to HEXTurn RGB or RGBA values into a HEX code with sliders or typed numbers.
- RGB to CMYKConvert RGB to CMYK percentages with the standard formula, see a print-style preview, and learn why ICC profiles, paper and rich black change the result..
- CMYK to RGBConvert CMYK percentages to RGB and HEX for screens, compare the swatches side by side, and see a warning when total ink coverage goes past 300 percent..
- HEX to CMYKConvert a HEX color code to CMYK percentages, with each step of the formula written out and the caveats that matter when the color goes to print..
- HEX to HSLConvert HEX to HSL, HSV and OKLCH, adjust with sliders, and see why HSL lightness of 50% can look bright yellow or dark blue while OKLCH stays even..
- Color converterPaste a color in any CSS format and convert it to HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab, OKLCH, XYZ and color() strings, with precision control..
- Color temperatureConvert a color temperature from 1000 K to 40000 K into RGB and HEX, compare light sources from candlelight to blue sky, and estimate a color’s Kelvin..
- Color name finderFind the closest name for any HEX code among about 31,000 open-source color names, ranked by CIEDE2000 distance, with the CSS keyword and the top alternatives..
Personal color
Seasonal color analysis, the quiz and all 12 season palettes.
- Color analysisTry free seasonal color analysis at home: hold your face in the camera frame and cycle drape colors from all 12 seasons.
- Skin tone chartA skin tone chart with the ten Monk Skin Tone Scale colors and their HEX codes, plus an undertone finder that reads a photo and four quick checks..
- Seasonal color quizAnswer ten questions about your undertone, contrast, eyes and hair to find your likely season among the 12, with the reasoning and a link to your palette..
- WinterThe winter color palette explained: cool, high-contrast colors, compared across Deep Winter, True Winter and Bright Winter, with HEX codes..
- AutumnThe autumn color palette explained: warm, earthy colors compared across Soft Autumn, True Autumn and Deep Autumn, with HEX codes to copy..
- SpringThe spring color palette explained: warm, clear and fresh colors compared across Light Spring, True Spring and Bright Spring, with HEX codes..
- Light SpringThe Light Spring color palette with HEX codes: warm, light, clear colors like peach and warm aqua, plus neutrals, accents and colors to avoid..
- True SpringTrue (Warm) Spring color palette with HEX codes: coral, golden yellow, kelly green and turquoise, plus neutrals, accents and colors to avoid..
- Bright SpringBright (Clear) Spring color palette with HEX codes: hot coral, turquoise, royal blue and lime, with neutrals, accents and colors to avoid..
- Light SummerThe Light Summer color palette with HEX codes: powder blue, lavender, rose pink and soft mint, plus neutrals, accents and colors to avoid..
- True SummerTrue (Cool) Summer color palette with HEX codes: raspberry, periwinkle, ocean blue and spruce, with neutrals, accents and colors to avoid..
- Soft SummerThe Soft Summer color palette with HEX codes: dusty blues, muted rose, sage and slate, plus neutrals, accents and colors to avoid..
- Soft AutumnThe Soft Autumn color palette with HEX codes: sage, camel, dusty teal and soft terracotta, plus neutrals, accents and colors to avoid..
- True AutumnTrue (Warm) Autumn color palette with HEX codes: rust, mustard, olive and teal, with neutrals, accents and the colors to avoid..
- Deep AutumnThe Deep Autumn color palette with HEX codes: chocolate, deep teal, burgundy and burnt orange, plus neutrals, accents and colors to avoid..
- Deep WinterThe Deep Winter color palette with HEX codes: black, true red, emerald and sapphire, plus neutrals, accents and the colors to avoid..
- True WinterTrue Winter (Cool Winter) color palette with HEX codes: icy white, true red, royal blue and emerald, with neutrals, accents and colors to avoid..
- Bright WinterBright (Clear) Winter color palette with HEX codes: fuchsia, electric blue, emerald and pure white, with neutrals, accents and colors to avoid..
Color families
Named shades with HEX codes you can copy.
- Color codesHTML color codes for every CSS named color, grouped by family, with HEX and RGB, plus links to shades of blue, green, red, pink and more..
- BlueShades of blue with names, HEX and RGB codes: CSS blues, light and sky blues, navy, and muted slate blues, each with a copy button and text-contrast note..
- GreenNamed shades of green with HEX and RGB codes: CSS greens, mint and light greens, bright greens, forest greens and olive tones, ready to copy..
- Sage greenSage green HEX codes and shades, from pale sage to deep olive sage, plus palette ideas for interiors, weddings and websites.
- MauveWhat color is mauve? See named mauve shades with HEX and RGB codes, pale dusty pinks to deep plum, plus palettes that pair well with mauve..
- RedShades of red with names and HEX codes: CSS reds, bright true reds, burgundy and maroon, brick and orange reds, and softer muted reds..
- PinkShades of pink with names and HEX codes: light pink and blush, hot pink and fuchsia, dusty rose, and the CSS pink keywords.
- PurplePurple color names and HEX codes: dark purple and plum, royal and bright purples, lavender and lilac, plus the CSS purple keywords..
- PastelPastel colors with HEX codes in pink, peach, yellow, mint, blue and lavender, plus palette ideas and a note on readable text over pastels..
- NeutralNeutral colors with HEX codes: whites and off-whites, beige and sand, greige and taupe, grays and charcoal, with undertone notes and palettes..
- DarkDark colors for backgrounds and dark mode, with HEX codes: navy, forest green, burgundy, plum, chocolate and soft near-blacks..
- GoldGold HEX codes including CSS gold #FFD700, named golds, metallic tones for gradients, and antique golds, with RGB values to copy..
- GrayGray color codes from light gray to charcoal, the CSS gray keywords, and warm and cool tinted grays, each with HEX, RGB and a text-contrast note..
- Mint greenMint green HEX codes: named mints, pale mint, fresh spearmint shades and deeper jade, with palette ideas that pair mint with neutrals and coral..
- Light greenLight green HEX codes: CSS lightgreen and palegreen, soft light greens, vivid apple greens and yellow-leaning pistachio shades, ready to copy..
- Light purpleLight purple HEX codes: CSS lavender, thistle and orchid, named lavenders and lilacs, bright light purples and periwinkle, ready to copy..
- Lime greenLime green HEX codes: CSS lime and limegreen, named limes, acid and electric limes, and softer kiwi tones, with contrast notes for text..
- Pastel pinkPastel pink HEX codes: named pastel and baby pinks, cool lilac-leaning pinks and warm peachy pinks, with palettes and text-contrast advice..
- NeonNeon color HEX codes: electric pink, acid green, laser yellow and more, the most saturated colors a screen can show, with usage tips..
- Pastel greenPastel green HEX codes: named pastel greens, mint-leaning pastels and pistachio-leaning pastels, with palette ideas and copy buttons..
- Pastel yellowPastel yellow HEX codes: named pastel yellows, butter and cream tones, and lemon and canary pastels, with tips for text over light yellow..
- PeachPeach color HEX codes: named peaches, light peach and deeper apricot shades, plus palette ideas pairing peach with neutrals and blue..
- CrimsonCrimson red HEX codes, starting with CSS crimson #DC143C, plus named crimsons and deep blue-leaning reds, with RGB values and pairings..
- Cool colorsCool colors with HEX codes: blues, teals and greens, purples and blue-tinted neutrals, with notes on why they feel calm and recede..
- Burnt orangeBurnt orange HEX codes: named burnt oranges and rusts, terracotta and copper, and deep brick tones, with fall palette ideas..
- OrangeShades of orange with HEX codes: CSS oranges, bright tangerine and pumpkin, light apricot, and dark earthy oranges, ready to copy..
- GreigeGreige HEX codes: named greiges, stones and putty tones, light and deep greige, with notes on undertones and pairing for walls and websites..
- Bright colorsBright colors with HEX codes from every part of the wheel, plus the brightest CSS keywords, with advice on pairing and readable text..
- Spring colorsSpring colors with HEX codes: blossom pinks, daffodil yellows, new-leaf greens, sky blues and lilac, with palette ideas for spring designs..
- TealTeal color HEX codes, including CSS teal #008080, named teals, light and deep teal shades, and palette ideas pairing teal with coral and cream..
- Navy blueNavy blue HEX codes, from CSS navy #000080 to named navies and midnight blues, with palette ideas and white-text contrast notes..
- BurgundyBurgundy color HEX codes: named burgundies and bordeaux, wine and oxblood reds, and plum-leaning shades, with palettes for fall and weddings..
- CoralCoral color HEX codes, including CSS coral #FF7F50 and lightcoral, named corals and pastel coral shades, with teal and navy palette ideas..
- LavenderLavender color HEX codes: CSS lavender #E6E6FA, named lavenders, and deeper lilac shades, with palettes pairing lavender with sage and cream..
- BeigeBeige color HEX codes: CSS beige, tan and wheat, named beiges, and sand, ecru and oatmeal neutrals, with undertone notes and palettes..
- MaroonMaroon color HEX codes, including CSS maroon #800000, named maroons, and chestnut and mahogany reds, with palette and contrast notes..
- Olive greenOlive green HEX codes: CSS olive #808000 and olivedrab, named olives, and army, moss and khaki greens, with earthy palette ideas..
- TurquoiseTurquoise color HEX codes: CSS turquoise #40E0D0 and its relatives, named turquoises, and aqua and lagoon blues, with tropical palette ideas..
- Emerald greenEmerald green HEX codes: named emeralds, jade and jewel greens, and deep emerald shades, with palette ideas pairing emerald with gold and cream..
- BrownShades of brown with HEX codes: CSS browns like sienna and saddlebrown, tan and camel, chestnut and walnut, and dark chocolate browns..
- YellowShades of yellow with HEX codes: CSS yellows, lemon and canary, warm golden yellows and pale butter tones, with text-contrast advice..
- TerracottaTerracotta color HEX codes: named terracottas, clay and baked-earth tones, and soft blush clays, with earthy palette ideas for homes and brands..
- Dusty roseDusty rose HEX codes: named dusty roses, old rose and antique rose, pale dusty pinks and deeper muted roses, with wedding palette ideas..
- CreamCream color HEX codes: named creams, CSS ivory, cornsilk and oldlace, and vanilla and eggshell off-whites, with tips for page backgrounds..
- Mustard yellowMustard yellow HEX codes: named mustards, ochre and golden mustard, and olive-leaning shades, with retro and fall palette ideas..
- Forest greenForest green HEX codes, including CSS forestgreen #228B22, named forest greens, and pine, hunter and bottle greens, with contrast notes..
- Baby blueBaby blue HEX codes: CSS lightblue and powderblue, named baby blues, and powder and sky blues, with palette ideas and text tips..
- PeriwinklePeriwinkle color HEX codes: named periwinkles, light periwinkle, and deeper iris and cornflower shades, with spring palette ideas..
- MagentaMagenta color HEX codes: CSS magenta and fuchsia #FF00FF, named magentas, and deep berry shades, with contrast notes for screen and print..
Hex math
Base-16 arithmetic and number conversions.
- Hex calculatorDo hexadecimal arithmetic and bitwise operations: add, subtract, multiply, divide, AND, OR, XOR, NOT and shifts, signed or unsigned from 8 to 64 bits..
- Hex to decimalConvert hexadecimal to decimal with every digit’s power of 16 shown.
- Decimal to hexConvert decimal numbers to hexadecimal using repeated division by 16, shown step by step.
- Hex to binaryConvert hexadecimal to binary one nibble at a time, with a lookup table, grouping options and padding to 8, 16, 32 or 64 bits..
- Binary to hexConvert binary to hexadecimal by splitting bits into groups of four from the right.
- Hex to textDecode hex bytes to readable text as UTF-8, ASCII or Latin-1.
- Text to hexConvert text to hexadecimal bytes in UTF-8 or UTF-16, then copy them spaced, with 0x or \x prefixes, or as a ready C array.
More tools
Games, Minecraft codes, resistors and grayscale photos.
- Minecraft color codesAll 16 Minecraft color codes and format codes with a live preview.
- Color gameThree quick color games: match a swatch with sliders, guess its HEX by eye, or find the odd tile against the clock.
- Resistor color codeDecode 4, 5 and 6 band resistor color codes by clicking bands, or enter a value to get the bands.
- Image color changerClick a color in your photo, choose a new one, and every matching pixel changes while shadows and texture stay.
- Color by numberTurn a photo into a printable color by number: choose 4 to 20 colors and a detail level, then print the numbered outline or color it online..
- Grayscale imageConvert a photo to grayscale in your browser using Rec.
No tool matches that filter.
What the calculator above does
Paste #0F766E, rgb(15 118 110), hsl(175 77% 26%) or even teal and HexaCalc reads it, then writes it back out in eight formats. The name line searches a list of about 4,900 hand-picked color names from the open-source meodai/color-names project and shows the closest one by CIEDE2000, the color-difference formula print shops use.
The two contrast boxes answer the question designers ask most: can I put text on this? A ratio of 4.5:1 is the WCAG 2.2 minimum for body text and 3:1 is the minimum for large text. Our sample teal gives white text 5.47:1, so it passes for buttons and links.
Why a whole site about hex codes
A HEX code like #D9481C is three bytes written in base 16: D9 red, 48 green, 1C blue. That compact form is how colors travel between Figma, CSS, Tailwind configs and brand guidelines. Most of the work people do with color is moving a code between formats, finding codes that work together, or checking a code is readable and printable. Each tool here handles one of those jobs well rather than all of them badly.
Everything runs on your device. Photos you open in the image picker, frames from the camera identifier and screenshots you paste are read by your browser and are never uploaded. There is no account to make and nothing to install.
Where to start
Designers usually start with the palette generator and finish in the contrast checker. Developers tend to need the HEX to RGB and RGB to HEX converters. If you have a photo with a color you love, the image color picker will give you its exact code, and the color mixer shows what happens when you blend it like paint.
HexaCalc is independent and free, paid for by a small number of ads placed below the tools, never over them. Read more about how the site works.