← Back to Editor

#B0D5A9 · #B9C926 · #C2AA34 · #D56D51 · #E23F67

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B0D5A9

Celadon · Silver · Apple Green

HEX
#B0D5A9
RGB
rgb(176, 213, 169)
HSL
hsl(110, 34%, 75%)
HSB
hsb(110, 21%, 84%)
CMYK
cmyk(17%, 0%, 21%, 16%)
Oklch
oklch(83.5% 0.072 140.6)

TraditionalCeladon」· PaintApple Green」· Creative Mint Breeze

#B9C926

Autumn Sage · GoldenRod · Honey Gold

HEX
#B9C926
RGB
rgb(185, 201, 38)
HSL
hsl(66, 68%, 47%)
HSB
hsb(66, 81%, 79%)
CMYK
cmyk(8%, 0%, 81%, 21%)
Oklch
oklch(79.7% 0.172 115.6)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#C2AA34

Autumn Sage · GoldenRod · Honey Gold

HEX
#C2AA34
RGB
rgb(194, 170, 52)
HSL
hsl(50, 58%, 48%)
HSB
hsb(50, 73%, 76%)
CMYK
cmyk(0%, 12%, 73%, 24%)
Oklch
oklch(73.8% 0.135 97.3)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#D56D51

Vermilion · Tomato · Passion Red

HEX
#D56D51
RGB
rgb(213, 109, 81)
HSL
hsl(13, 61%, 58%)
HSB
hsb(13, 62%, 84%)
CMYK
cmyk(0%, 49%, 62%, 16%)
Oklch
oklch(65.0% 0.138 36.0)

TraditionalVermilion」· PaintPassion Red」· Creative Blush Sunrise

#E23F67

Vermilion · Tomato · Passion Red

HEX
#E23F67
RGB
rgb(226, 63, 103)
HSL
hsl(345, 74%, 57%)
HSB
hsb(345, 72%, 89%)
CMYK
cmyk(0%, 72%, 54%, 11%)
Oklch
oklch(61.7% 0.199 11.0)

TraditionalVermilion」· PaintPassion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0D5A9
CEAAD5

Analogous

C6D5AA
B0D5A9
AAD5B8

Triadic

B0D5A9
AAB1D5
D5AAB1

Split-Comp.

B0D5A9
B8AAD5
D5AAC6

Tetradic

B0D5A9
AAC6D5
CEAAD5
D5B8AA

Contrast Matrix WCAG 2.1 Contrast

B0D5A9
B9C926
C2AA34
D56D51
E23F67
1.1
Fail
1.4
Fail
2.1
Fail
2.5
Fail
1.1
Fail
1.3
Fail
1.9
Fail
2.2
Fail
1.4
Fail
1.3
Fail
1.5
Fail
1.8
Fail
2.1
Fail
1.9
Fail
1.5
Fail
1.2
Fail
2.5
Fail
2.2
Fail
1.8
Fail
1.2
Fail
White BG
1.6Fail
1.8Fail
2.3Fail
3.4AA Large
4.1AA Large
Black BG
12.9AAA
11.4AAA
9.1AAA
6.1AA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C0B4
C0C04D
B8B751
A8A758
9B9A5D

Deuteranopia

BEBBB6
BFBE57
B9BB57
AEB659
A5B15B

Tritanopia

B2BCBE
BA6D73
C1676C
D05D5E
DA5654

Achromatopsia

C5C5C5
B2B2B2
A4A4A4
898989
747474

Shades & Tints Shades & Tints

#B0D5A9

Dark
Light

#B9C926

Dark
Light

#C2AA34

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0d5a9;
  --color-2: #b9c926;
  --color-3: #c2aa34;
  --color-4: #d56d51;
  --color-5: #e23f67;
}

SCSS

$color-1: #b0d5a9;
$color-2: #b9c926;
$color-3: #c2aa34;
$color-4: #d56d51;
$color-5: #e23f67;

TAILWIND

colors: {
  'brand-1': '#b0d5a9',
  'brand-2': '#b9c926',
  'brand-3': '#c2aa34',
  'brand-4': '#d56d51',
  'brand-5': '#e23f67',
}

RGB Array

[176, 213, 169], [185, 201, 38], [194, 170, 52], [213, 109, 81], [226, 63, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0D5A9, #B9C926, #C2AA34, #D56D51, #E23F67 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: #b0d5a9; --color-2: #b9c926; --color-3: #c2aa34; --color-4: #d56d51; --color-5: #e23f67. 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 general-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