← Back to Editor

#B7E2D6 · #0E9CA5 · #A88E0A · #B84912 · #333A34

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#B7E2D6

Jade · LightBlue · Glacier Blue

HEX
#B7E2D6
RGB
rgb(183, 226, 214)
HSL
hsl(163, 43%, 80%)
HSB
hsb(163, 19%, 89%)
CMYK
cmyk(19%, 0%, 5%, 11%)
Oklch
oklch(87.9% 0.048 176.3)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#0E9CA5

Lake Blue · LightSeaGreen · Mint Ice

HEX
#0E9CA5
RGB
rgb(14, 156, 165)
HSL
hsl(184, 84%, 35%)
HSB
hsb(184, 92%, 65%)
CMYK
cmyk(92%, 5%, 0%, 35%)
Oklch
oklch(63.2% 0.105 202.2)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#A88E0A

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A88E0A
RGB
rgb(168, 142, 10)
HSL
hsl(50, 89%, 35%)
HSB
hsb(50, 94%, 66%)
CMYK
cmyk(0%, 15%, 94%, 34%)
Oklch
oklch(65.1% 0.132 95.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B84912

Tangerine · Sienna · Amber Brown

HEX
#B84912
RGB
rgb(184, 73, 18)
HSL
hsl(20, 82%, 40%)
HSB
hsb(20, 90%, 72%)
CMYK
cmyk(0%, 60%, 90%, 28%)
Oklch
oklch(54.7% 0.156 42.1)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#333A34

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#333A34
RGB
rgb(51, 58, 52)
HSL
hsl(129, 6%, 21%)
HSB
hsb(129, 12%, 23%)
CMYK
cmyk(12%, 0%, 10%, 77%)
Oklch
oklch(34.0% 0.014 149.5)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7E2D6
E2B6C2

Analogous

B6E2C0
B7E2D6
B6D8E2

Triadic

B7E2D6
D6B6E2
E2D6B6

Split-Comp.

B7E2D6
E2B6D8
E2C0B6

Tetradic

B7E2D6
C0B6E2
E2B6C2
D8E2B6

Contrast Matrix WCAG 2.1 Contrast

B7E2D6
0E9CA5
A88E0A
B84912
333A34
—
2.4
Fail
2.3
Fail
3.7
AA Large
8.3
AAA
2.4
Fail
—
1.0
Fail
1.6
Fail
3.5
AA Large
2.3
Fail
1.0
Fail
—
1.6
Fail
3.6
AA Large
3.7
AA Large
1.6
Fail
1.6
Fail
—
2.2
Fail
8.3
AAA
3.5
AA Large
3.6
AA Large
2.2
Fail
—
White BG
1.4Fail
3.3AA Large
3.2AA Large
5.3AA
11.7AAA
Black BG
14.9AAA
6.3AA
6.5AA
4.0AA Large
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACAD9
4B4DA3
9D9D2A
88871F
363635

Deuteranopia

C7C4DA
4339A2
9EA032
8E9723
363536

Tritanopia

B9DBDC
15A1A1
A74349
B22A2C
333737

Achromatopsia

D4D4D4
737373
878787
646464
373737

Shades & Tints Shades & Tints

#B7E2D6

Dark
Light

#0E9CA5

Dark
Light

#A88E0A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7e2d6;
  --color-2: #0e9ca5;
  --color-3: #a88e0a;
  --color-4: #b84912;
  --color-5: #333a34;
}

SCSS

$color-1: #b7e2d6;
$color-2: #0e9ca5;
$color-3: #a88e0a;
$color-4: #b84912;
$color-5: #333a34;

TAILWIND

colors: {
  'brand-1': '#b7e2d6',
  'brand-2': '#0e9ca5',
  'brand-3': '#a88e0a',
  'brand-4': '#b84912',
  'brand-5': '#333a34',
}

RGB Array

[183, 226, 214], [14, 156, 165], [168, 142, 10], [184, 73, 18], [51, 58, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7E2D6, #0E9CA5, #A88E0A, #B84912, #333A34 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b7e2d6; --color-2: #0e9ca5; --color-3: #a88e0a; --color-4: #b84912; --color-5: #333a34. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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