Pastel Color Generator

A pastel is a pure color with a lot of white mixed in

A pastel color is a pure hue lightened with plenty of white until it looks pale and soft. The pink at the top of the page, #FFCAE0, is 21% of the pure hue #FF006A plus 79% white, and the lemon #FDF6C5 is 22% of #FFDF00, 77% white and 1% black. Wikipedia describes pastels as a pale family of colors that, in the HSV color space, have high value and low or medium saturation.

Pick a hue family and a tone, and the generator draws a pastel palette of 3 to 8 colors. You can lock the colors you like and redraw only the rest, or drag a dot on the pastel map to fine-tune hue and clarity by hand. For every color it shows a readable text color with its contrast, the HEX, RGB, HSL, HWB and OKLCH codes, and the mix of pure hue, white and black.

When a pastel palette helps

Pastels are easy on the eyes over large areas and do not compete with text or photos, which is why they are so common as backgrounds. What you need to check still depends on where the color goes.

• Websites and apps: card backgrounds, notice bars and tags are wide surfaces that should not shout. What matters most is whether the text on top stays readable, so check the matching text color and its contrast.
• Baby, kids and spring designs: baby shower invitations, children's worksheets or a spring sale banner all want a gentle feel. Mix several hue families but keep one tone, and the palette still reads as a set.
• Slides and documents: use pastels for table row bands, step boxes and chart backgrounds. One strong accent color next to several pastels makes it clear what to look at first.
• Planners, stickers and illustration: for journaling pages, stickers or an illustration's base colors. When you move a screen color to paint or print, the result may not match, so do a test print.

How to use the generator

1. Under Hue family, choose All or one of red, orange, yellow, green, mint, blue, purple and pink. With a single family, the hue and clarity are spread out so the colors do not overlap.
2. Choose a Tone (Pale, Soft, Clear or Mixed) and a Count of 3 to 8 colors. Changing the family or tone immediately redraws every color that is not locked.
3. Press Generate new or hit the Space key. Click the lock on a card to keep that color through later redraws.
4. Click a card to select its color, then drag its dot on the pastel map or click the spot you want. Left and right change the hue, up and down change the clarity. With the dot focused, the arrow keys move one step and Shift plus an arrow moves ten.
5. If you already have a color, such as a brand color, type it into Turn my color into a pastel as #2563EB, rgb(37 99 235) or royalblue. It becomes a pastel of the same hue, goes into the selected slot and is locked.
6. Take the finished palette with Copy all HEX, Copy CSS variables (with the matching text colors), Save PNG (1200 × 630) or Copy link. The link carries the colors and which ones are locked.

A pastel is defined by how much white it contains

The HWB notation in CSS Color 4 describes a color as a hue plus how much white and black are mixed in. Any screen color can be rewritten exactly as a split into pure hue, white and black: white is the smallest RGB value, black is 255 minus the largest, and what remains is the pure hue. A pastel is a color where white dominates and black is nearly absent.

The generator does not choose these percentages directly. It picks a point on the straight line between the pure hue and white in OKLab, a color space built to match how we see lightness. The reason is that the same 79% white looks very bright on a yellow and less bright on a purple. The clarity value on the map is the position of that point, and the mix shown in the detail panel is the result split back into HWB.

Three tones: pale, soft and clear

Clarity runs from 0 to 100, and the closer to 0, the more white. The tones are three bands of clarity, and Mixed draws from the whole 0 to 100 range. The white share is the range across every hue on the map.

Pastel color chart: 8 hue families × 3 tones

These 24 codes are taken at the middle hue of each family, with clarity 15 for Pale, 48 for Soft and 82 for Clear. They sit at the same spots on the generator's map with the same values, so you can pick one here and nudge it on the map to find close neighbors.

Text colors on a pastel background

WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for body text (AA), and 7:1 for the stricter AAA level. Pastels are so light that white text on them is nearly unreadable. We computed all 36,360 pastels on the generator's map: even the best of them gives white text only 1.8:1, which does not reach the 3:1 allowed for large text.

In contrast, a very dark version of the same hue (OKLCH lightness 36%) reaches at least 6.1:1 on every pastel, and 88.0% of them reach 7:1 or more. That is the color the generator shows as the matching text. Gray #767676, which only just clears 4.5:1 on white, falls short on pastels.

Ratios are rounded down to one decimal place. WCAG does not round contrast, so 4.49:1 does not count as reaching 4.5:1. Black is perfectly readable too, but a dark shade of the pastel's own hue looks like part of the same set and keeps the soft feel that makes pastels what they are.

Why some hue families look lighter than others

Even at the same Soft tone, yellow and mint pastels look almost white, while pink and purple look deeper. The pure hues start at different lightness: yellow is bright to begin with, so a little white makes it very light, whereas purple is dark and needs a lot more white to get to a similar level.

For that reason the generator adds more white to the darker families so that pastel lightness stays above a certain level. Darkening a yellow to make it stronger just turns it muddy, like mustard or olive, so even at clarity 100 the yellow pastels keep more than 60% white.

Turning your own color into a pastel

Turn my color into a pastel keeps the OKLCH hue angle of the color you enter and applies the middle clarity of the tone you have selected. If your color is already lighter than the clearest pastel of that hue, it picks the clarity closest to the original lightness, so something that is already a pastel stays almost the same. The results below are for the Soft tone.

Colors with almost no chroma, such as gray, white and black (OKLCH chroma below 0.006), cannot be assigned to any pastel family, so they are not converted and the tool shows a notice instead. A barely tinted white like aliceblue #F0F8FF has a chroma of 0.013, so it becomes the palest pastel of its hue, #E1F1FF.

Common mistakes

• White text on a pastel background: you often see it on buttons and banners, but the contrast is only 1 to 1.8:1, which is hard to read. Use the matching text color or a dark shade. If you really need white text, switch the background from a pastel to a deep color.
• Pastel text on a pastel background: a sky-blue label on a pink panel is bright on bright, so the contrast almost vanishes. Leave the surfaces to the pastels and the text to a deep color.
• Judging by the HSL saturation number: the HSL notation of #FFCAE0 is hsl(335 100% 89.6%), so its saturation reads 100%, because HSL saturation is computed separately from lightness. To judge whether something is a pastel, look at the HSV saturation (21% for this color) or the HWB white share (79%).
• Muddy colors from mixing in gray: adding gray instead of white raises the black in HWB and gives the muted, dusty shades. Those are popular too, but they are a different family, and mixing them with this generator's output can make one side look dull.
• A different tone for every family: a pale yellow next to a clear purple makes only the purple stand out. When you use several families, fix one tone and draw from it so the palette looks tidy.
• Printing screen colors as they are: a pastel on a monitor is made of light, and on paper it can come out duller or yellower. For print work, check against your printer's CMYK swatches or run a test print.

Limits and cautions

• There is no official international standard for "pastel". The range used here (58–93% white mixed into the pure hue) is a design choice meant to cover what people commonly call pastel, and other tools may define it differently.
• All colors are for sRGB screens. On a wide-gamut monitor, or with a phone's night mode or color correction turned on, the same code can look different.
• The mix is a split of a screen color into HWB. It is not the real amount of paint or colored pencil, so treat it as a rough guide for art supplies and confirm with a test swatch.
• Contrast only measures the difference in lightness between text and background. Whether two pastels can be told apart by someone with a color vision deficiency has to be checked separately.
• Generate new uses the browser's random numbers, so the same settings give a different palette each time. Keep a palette you like with Copy link or Save PNG.

Basis: colors are calculated with the OKLab and HWB definitions in W3C CSS Color 4 (Candidate Recommendation Draft, October 20, 2026), and contrast with the relative luminance formula in WCAG 2.2 (Recommendation, December 12, 2024). The codes and contrast figures in the tables were calculated with this generator on October 21, 2026.

Sources

• 01W3C — CSS Color Module Level 4, 8. HWB ColorsThe hwb() notation describes a color by how much white and black is mixed into a hue; gray when white plus black reaches 100% or more
• 02W3C — CSS Color Module Level 4, 9.2 Oklab and OkLChThe OKLab and OKLCH color spaces used for the map and the generation, and section 14 on gamut mapping (reducing chroma to fit inside sRGB)
• 03W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)4.5:1 for body text, 3:1 for large text, 7:1 in 1.4.6, and the contrast formula
• 04Björn Ottosson — A perceptual color space for image processingDefinition of the OKLab color space and its conversion matrices
• 05Wikipedia — Pastel (color)Describes pastels as a pale family of colors with high value and low or medium saturation in the HSV color space

Frequently asked questions

Tools to use alongside