Pastel Colors Hex Codes: Pink, Blue, Yellow, Green and Orange (2026)

The most widely used pastel hex codes are pastel pink #FFD1DC, pastel blue #AEC6CF, pastel yellow #FDFD96, pastel green #77DD77 and pastel orange #FFB347. No standards body owns these names, so sites disagree on some of them, orange most of all. This guide gives the common code for each color, a lighter alternative, tested text contrast, ready-made palettes and prompts for getting pastels out of an AI image generator. All figures are as of 5 November 2026.

What are the hex codes for pastel colors?

Here is the quick reference. The RGB and HSL values are converted directly from each hex code, so you can paste whichever format your tool wants.

Hex codes are not case sensitive, so #ffd1dc and #FFD1DC are the same color. MDN's hex color reference covers the syntax, including the eight-digit form that adds transparency.

Why do different sites list different pastel codes?

"Pastel" is a description, not a registered color. Pink, yellow, purple and red are fairly settled across color sites. Blue, green and orange are not:

• Pastel blue: #AEC6CF is the most common value and it is a grayish blue. Some palettes use the brighter #A0C4FF instead.
• Pastel green: #77DD77 is the classic, but it is quite strong. Lighter palettes use #CAFFBF or #BDFCC9.
• Pastel orange: this is the least settled. You will see #FFB347, #FAC898, #FFD6A5 and even #FF964F, all under the same name.

None of these is wrong. If your brand or project needs one exact value, pick it once, write it down and stop relying on the name.

Which lighter pastel should you use instead?

The classic set has a few colors that look stronger than most people expect from the word "pastel". Green, orange and red are the main ones. If you want the pale, airy look, swap them for these:

Note the difference in character. #AEC6CF and #B39EB5 are dusty and muted, with low saturation. #A0C4FF and #BDB2FF are clean and candy-like. Mixing the two groups in one design often looks accidental, so choose one family.

What actually makes a color pastel?

A pastel is a pale tint: a hue with a lot of white in it, so it is high in lightness and soft in intensity. Beyond that, the numbers are only rules of thumb. Published HSL ranges conflict, with one generator using 70–90% lightness and 25–80% saturation, and other sites giving narrower bands.

The table above shows why a strict range does not work. Pastel blue has 26% saturation in HSL while pastel pink has 100%, and both read as pastel because HSL saturation behaves differently near white. Lightness is the more useful thing to watch. Pink, yellow and blue sit at 75% lightness or higher, while orange, green, purple and red sit between 64% and 69%, which is why they look stronger.

How do you turn any color into a pastel?

Mix it with white. For each RGB channel, move the value toward 255 by the same fraction. At 70% white:

1. Take one channel value, for example 0 for the red channel of pure blue.
2. Work out the gap to 255, then multiply by 0.7. Here that gives 178.5.
3. Add that to the original value and round, which gives 179.
4. Repeat for the other two channels and convert the results to hex.

Pure blue #0000FF becomes #B3B3FF, pure red #FF0000 becomes #FFB3B3 and pure green #00FF00 becomes #B3FFB3. In CSS you can skip the math:

cssCopy
:root {
  --pastel-blue: color-mix(in srgb, blue 30%, white);
  --pastel-brand: color-mix(in srgb, #0B5FFF 25%, white);
}

This is the best route for a brand color, because the tint stays related to the original hue instead of being a generic pastel from a list.

Can you use pastel colors for text?

Not on white. We calculated the WCAG contrast ratio of every color in the first table, and none of them is readable as text on a white background. WCAG level AA asks for 4.5:1 on normal text and 3:1 on large text, which MDN defines as at least 18pt, or 14pt bold. Interface components and graphical objects also need 3:1.

Three practical results come out of this:

• As text on white, all seven fail, even at large sizes. The best of them, pastel red, only reaches 2.82:1.
• As a background, all seven work. Black text clears 7:1 on every one, and #1F2937 clears 4.5:1 on every one.
• A pastel button on white needs an outline. The fill alone is under 3:1 against the page, so add a darker border if the shape is what tells people it is a button.

The simple rule: use pastels for surfaces, cards, tags and illustrations, and keep text and icons dark.

What are good pastel color palettes?

These five are built from the codes above. Each one holds together because it stays in one family.

For a real layout, try giving one color about 60% of the space, a second about 30% and an accent the remaining 10%. Add one dark neutral for text. That neutral matters more than a fifth pastel, since an all-pastel layout has nothing to anchor the eye.

How do you get pastel colors in AI images?

Describe the palette in words first, then add the hex codes as a guide. Treat codes as a hint, not a promise: image models read a prompt as language, so they get you close rather than matching a value exactly. If the exact value matters, check the result with an eyedropper tool and correct it afterward.

Four prompts you can copy:

• Illustration: "Flat vector illustration of a small bakery storefront, soft pastel palette of pastel pink #FFD1DC, pastel blue #AEC6CF and pastel yellow #FDFD96, cream background, low contrast, gentle daylight, no harsh shadows."
• Room: "Bright Scandinavian living room with pastel blue walls, pale pink cushions, light oak floor, soft diffused window light, muted and airy color grading."
• Product: "Studio product photo of a ceramic mug on a pastel green seamless background, soft even lighting, pale shadows, minimal composition, lots of empty space."
• Pattern: "Seamless repeating pattern of small clouds and stars, sorbet pastel palette of peach, lemon and mint on white, hand-drawn texture, soft edges."

A few words do most of the work: pastel, muted, soft, pale, airy, diffused light, low contrast. Words that push the other way include vivid, neon, saturated, dramatic and high contrast. Say what you want rather than what to avoid, because not every model has a negative prompt. Seedream 5.0 Pro on Kenerate, for example, does not.

If your prompt is short, run it through the AI prompt enhancer to add lighting and style detail, or browse the prompt library for a starting point.

Which Kenerate tools help with pastel images?

Both Seedream 5.0 models accept up to 10 reference images for edits, which helps when a set of pictures needs to keep the same palette. Upload your first good result as a reference for the next one.

Where do pastel colors work best?

Pastels suit anything meant to feel calm, friendly or light, and they are a poor fit where a design has to shout. Some quick guidance:

• Web and apps: large background areas, section bands, tags and chart fills, with dark text on top.
• Print: expect shifts. Hex codes describe screen color, and very pale tints can wash out on paper, so run a test print before a big order.
• Social posts: pale backgrounds with one dark headline tend to stay legible at small sizes.
• Interiors: a paint swatch name will not match a hex code, so use the code to pick a direction and judge the real paint on the wall.
• Data charts: adjacent pastels are hard to tell apart, so add dark outlines or direct labels rather than relying on fill alone.

If you work from a pastel palette often, save the codes in one place, such as CSS variables or a design file's color styles. That way you stay consistent even when color sites disagree on what "pastel orange" means.