← Back to Editor

#9DEBDA · #B09E6A · #485754 · #37403E · #2B2424

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#9DEBDA

Jade · LightBlue · Glacier Blue

HEX
#9DEBDA
RGB
rgb(157, 235, 218)
HSL
hsl(167, 66%, 77%)
HSB
hsb(167, 33%, 92%)
CMYK
cmyk(33%, 0%, 7%, 8%)
Oklch
oklch(88.5% 0.081 179.1)

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

#B09E6A

Ginger · Tan · Sunflower

HEX
#B09E6A
RGB
rgb(176, 158, 106)
HSL
hsl(45, 31%, 55%)
HSB
hsb(45, 40%, 69%)
CMYK
cmyk(0%, 10%, 40%, 31%)
Oklch
oklch(70.3% 0.073 91.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#485754

Mineral Blue · DarkSlateGray · Charcoal

HEX
#485754
RGB
rgb(72, 87, 84)
HSL
hsl(168, 9%, 31%)
HSB
hsb(168, 17%, 34%)
CMYK
cmyk(17%, 0%, 3%, 66%)
Oklch
oklch(44.3% 0.019 181.9)

Traditional「Mineral Blue」· Paint「Charcoal」· Creative Midnight Shadow

#37403E

Mineral Blue · DarkSlateGray · Dark Stone

HEX
#37403E
RGB
rgb(55, 64, 62)
HSL
hsl(167, 8%, 23%)
HSB
hsb(167, 14%, 25%)
CMYK
cmyk(14%, 0%, 3%, 75%)
Oklch
oklch(36.3% 0.012 180.7)

Traditional「Mineral Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#2B2424

Crimson · DarkSlateGray · Dark Stone

HEX
#2B2424
RGB
rgb(43, 36, 36)
HSL
hsl(0, 9%, 15%)
HSB
hsb(0, 16%, 17%)
CMYK
cmyk(0%, 16%, 16%, 83%)
Oklch
oklch(26.8% 0.011 17.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DEBDA
EB9EAE

Analogous

9EEBB4
9DEBDA
9ED5EB

Triadic

9DEBDA
DA9EEB
EBDA9E

Split-Comp.

9DEBDA
EB9ED5
EBB49E

Tetradic

9DEBDA
B49EEB
EB9EAE
D5EB9E

Contrast Matrix WCAG 2.1 Contrast

9DEBDA
B09E6A
485754
37403E
2B2424
—
1.9
Fail
5.5
AA
7.8
AAA
11.1
AAA
1.9
Fail
—
2.9
Fail
4.0
AA Large
5.8
AA
5.5
AA
2.9
Fail
—
1.4
Fail
2.0
Fail
7.8
AAA
4.0
AA Large
1.4
Fail
—
1.4
Fail
11.1
AAA
5.8
AA
2.0
Fail
1.4
Fail
—
White BG
1.4Fail
2.6Fail
7.6AAA
10.7AAA
15.2AAA
Black BG
15.3AAA
7.9AAA
2.8Fail
2.0Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFDE
A8A877
4E4F55
3B3B3E
282824

Deuteranopia

BAB4DF
A9AB7A
4E4D55
3A3A3F
282924

Tritanopia

A1E1E2
AF8183
495555
373F3F
2B2424

Achromatopsia

D2D2D2
9D9D9D
525252
3D3D3D
262626

Shades & Tints Shades & Tints

#9DEBDA

Dark
Light

#B09E6A

Dark
Light

#485754

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9debda;
  --color-2: #b09e6a;
  --color-3: #485754;
  --color-4: #37403e;
  --color-5: #2b2424;
}

SCSS

$color-1: #9debda;
$color-2: #b09e6a;
$color-3: #485754;
$color-4: #37403e;
$color-5: #2b2424;

TAILWIND

colors: {
  'brand-1': '#9debda',
  'brand-2': '#b09e6a',
  'brand-3': '#485754',
  'brand-4': '#37403e',
  'brand-5': '#2b2424',
}

RGB Array

[157, 235, 218], [176, 158, 106], [72, 87, 84], [55, 64, 62], [43, 36, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9DEBDA, #B09E6A, #485754, #37403E, #2B2424 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9debda; --color-2: #b09e6a; --color-3: #485754; --color-4: #37403e; --color-5: #2b2424. 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 tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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