← Back to Editor

#B9D89A · #78C08A · #B29D3B · #E3683F · #E9221B

pastel

A 5-color pastel palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#B9D89A

Celadon · Silver · Apple Green

HEX
#B9D89A
RGB
rgb(185, 216, 154)
HSL
hsl(90, 44%, 73%)
HSB
hsb(90, 29%, 85%)
CMYK
cmyk(14%, 0%, 29%, 15%)
Oklch
oklch(84.4% 0.089 129.7)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#78C08A

Celadon · DarkSeaGreen · Apple Green

HEX
#78C08A
RGB
rgb(120, 192, 138)
HSL
hsl(135, 36%, 61%)
HSB
hsb(135, 38%, 75%)
CMYK
cmyk(38%, 0%, 28%, 25%)
Oklch
oklch(74.6% 0.107 151.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#B29D3B

Ochre · GoldenRod · Honey Gold

HEX
#B29D3B
RGB
rgb(178, 157, 59)
HSL
hsl(49, 50%, 46%)
HSB
hsb(49, 67%, 70%)
CMYK
cmyk(0%, 12%, 67%, 30%)
Oklch
oklch(69.6% 0.119 97.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#E3683F

Tangerine · Tomato · Warm Sun

HEX
#E3683F
RGB
rgb(227, 104, 63)
HSL
hsl(15, 75%, 57%)
HSB
hsb(15, 72%, 89%)
CMYK
cmyk(0%, 54%, 72%, 11%)
Oklch
oklch(66.0% 0.163 38.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#E9221B

Vermilion · Crimson · Passion Red

HEX
#E9221B
RGB
rgb(233, 34, 27)
HSL
hsl(2, 82%, 51%)
HSB
hsb(2, 88%, 91%)
CMYK
cmyk(0%, 85%, 88%, 9%)
Oklch
oklch(59.8% 0.229 28.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9D89A
BA9CD8

Analogous

D8D89C
B9D89A
9CD89C

Triadic

B9D89A
9CBAD8
D89CBA

Split-Comp.

B9D89A
9C9CD8
D89CD8

Tetradic

B9D89A
9CD8D8
BA9CD8
D89C9C

Contrast Matrix WCAG 2.1 Contrast

B9D89A
78C08A
B29D3B
E3683F
E9221B
—
1.4
Fail
1.7
Fail
2.1
Fail
2.8
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
2.1
Fail
1.7
Fail
1.2
Fail
—
1.2
Fail
1.7
Fail
2.1
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
2.8
Fail
2.1
Fail
1.7
Fail
1.3
Fail
—
White BG
1.6Fail
2.2Fail
2.7Fail
3.3AA Large
4.5AA Large
Black BG
13.4AAA
9.7AAA
7.8AAA
6.3AA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C7A9
979897
A9A953
AEAD49
93911D

Deuteranopia

C5C2AD
938E9A
AAAC58
B5BE4B
9EAD1D

Tritanopia

BBB5B7
7CA1A4
B1656A
DD5152
DF1E1E

Achromatopsia

C8C8C8
A4A4A4
989898
888888
5D5D5D

Shades & Tints Shades & Tints

#B9D89A

Dark
Light

#78C08A

Dark
Light

#B29D3B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9d89a;
  --color-2: #78c08a;
  --color-3: #b29d3b;
  --color-4: #e3683f;
  --color-5: #e9221b;
}

SCSS

$color-1: #b9d89a;
$color-2: #78c08a;
$color-3: #b29d3b;
$color-4: #e3683f;
$color-5: #e9221b;

TAILWIND

colors: {
  'brand-1': '#b9d89a',
  'brand-2': '#78c08a',
  'brand-3': '#b29d3b',
  'brand-4': '#e3683f',
  'brand-5': '#e9221b',
}

RGB Array

[185, 216, 154], [120, 192, 138], [178, 157, 59], [227, 104, 63], [233, 34, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #B9D89A, #78C08A, #B29D3B, #E3683F, #E9221B is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b9d89a; --color-2: #78c08a; --color-3: #b29d3b; --color-4: #e3683f; --color-5: #e9221b. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This pastel-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color