HexaCalc
All tools
Pick Hex color pickerColor picker from imagePalette from imageCamera color identifierScreen color picker
Create Palette generatorColor wheelComplementary colorsTriadic colorsMonochromatic schemeColor mixerBrownBlueGreenPurplePinkOrangeGrayColor matcherGradient generatorTailwind color generatorShades and tintsRandom color generatorPaint color visualizerWebsite color schemesColor mixing chart
Check Contrast checkerColor blindness simulatorColor blind testTypes of color blindnessHue test
Convert HEX to RGBRGB to HEXRGB to CMYKCMYK to RGBHEX to CMYKHEX to HSLColor converterColor temperatureColor name finder
Personal color Color analysisSkin tone chartSeasonal color quizWinterAutumnSpringLight SpringTrue SpringBright SpringLight SummerTrue SummerSoft SummerSoft AutumnTrue AutumnDeep AutumnDeep WinterTrue WinterBright Winter
Color families Color codesBlueGreenSage greenMauveRedPinkPurplePastelNeutralDarkGoldGrayMint greenLight greenLight purpleLime greenPastel pinkNeonPastel greenPastel yellowPeachCrimsonCool colorsBurnt orangeOrangeGreigeBright colorsSpring colors
Hex math Hex calculatorHex to decimalDecimal to hexHex to binaryBinary to hexHex to textText to hex
More tools Minecraft color codesColor gameResistor color codeImage color changerColor by numberGrayscale image
↑ ↓ to moveEnter to openEsc to close

Monochromatic color scheme generator

Give it one color and it builds a ladder of lighter and darker versions that keep the same hue. Each rung shows whether white or dark text passes WCAG on it.

     

    Interface preview

    StudioAccount

    One hue, many jobs

    Backgrounds, borders, text and buttons all come from the same ladder, so the page holds together without extra colors.

    Primary action Secondary

    One hue, a full range

    A monochromatic scheme uses a single hue at different lightness and saturation levels. It's the safest scheme there is: colors from one hue can't clash, and the result looks calm and deliberate. It's also more useful than it sounds, because a good ladder of one hue covers backgrounds, borders, secondary text, buttons and hover states.

    The generator takes your base color, keeps its OKLCH hue and builds 5 to 12 steps from very light (97% lightness) to very dark (22%).

    Why OKLCH instead of HSL

    You could build the same ladder by changing HSL lightness. The trouble is that HSL steps are not perceptually even. Take the violet #6D28D9 and set HSL lightness to 90, 75, 60, 45, 30 and 15%. The OKLCH lightness of those colors comes out at 0.89, 0.73, 0.57, 0.45, 0.34 and 0.22. The steps shrink from 16 points at the light end to 11 at the dark end, so the dark half of the ladder bunches together.

    OKLCH lightness is designed to track how bright a color looks, so equal steps look equal. The generator spaces lightness evenly in OKLCH and lets the chroma (colorfulness) taper off near white and black. Very light and very dark colors can't hold much chroma in sRGB anyway, and forcing it produces garish tints.

    Reading the contrast grades

    Each rung shows two numbers: W is the contrast ratio with white text and D is the ratio with dark text (#1C1B18). The badges translate them using WCAG 2.2:

    • AAA: 7:1 or more, fine for any text
    • AA: 4.5:1 or more, fine for body text
    • AA large: 3:1 or more, only for large text (24 px, or 18.66 px bold) and UI parts such as borders and icons
    • fail: under 3:1

    For the default violet with nine steps, white text first passes AA on the fifth step, #8951FD (4.51:1). Dark text passes on the first four. That crossover is typical and gives a simple rule: light steps take dark text, dark steps take white text, and the middle step is the one to check most carefully.

    How the preview assigns roles

    The interface preview picks from the ladder automatically:

    • the lightest step for the page background, the next for the navigation bar;
    • a light step for the card;
    • the first step from the middle down that carries white text at 4.5:1 for the primary button, which also colors the outline button;
    • a dark step with at least 7:1 against the card for body text.

    It's a sketch, not a finished design, but it shows whether your hue can do all the jobs. Some hues struggle. Yellows, for example, have to get quite dark before white text works, and by then they look olive or brown.

    Controls

    • Steps: 5 is enough for a simple site, 9 to 12 for a design system with hover, active and disabled states.
    • Chroma: 100% keeps your color's full saturation at the middle of the ladder. Lower it for a muted, grown-up palette. At 0% you get a neutral gray ramp tinted by nothing at all, which is handy for comparing against.

    When monochrome is the right call

    • Dashboards and tools, where color should support content, not compete with it.
    • Brands with one strong color, where everything else is variations of it.
    • Photography and portfolio sites, where the images bring the color.
    • Dark-mode themes, which often use one hue at very low lightness for surfaces.

    If it starts to feel flat, add a single accent hue for calls to action. That's still mostly monochrome, but with a focal point.

    For a scale that follows Tailwind's 50–950 naming, use the Tailwind color generator. For tints, shades and tones mixed toward white, black and gray, use the color shades generator. To add a second hue, see the triadic scheme generator or the color wheel.

    FAQ

    Is black and white a monochromatic scheme?

    An achromatic one: it has no hue at all. Set the chroma slider to 0% to build one.

    How many colors should a monochromatic palette have?

    Three to five for most designs: a background, a surface, a mid tone for accents and borders, and a dark for text. Larger ladders help when you need many interface states.

    Can I export the scheme?

    Yes. The export box copies the steps as CSS variables, Tailwind config, SCSS, JSON or design tokens, or downloads a PNG.