← Back to Editor

#B2DFDA · #5A706E · #664F2F · #762A1C · #461E12

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

#B2DFDA

Jade · LightBlue · Glacier Blue

HEX
#B2DFDA
RGB
rgb(178, 223, 218)
HSL
hsl(173, 41%, 79%)
HSB
hsb(173, 20%, 87%)
CMYK
cmyk(20%, 0%, 2%, 13%)
Oklch
oklch(87.1% 0.047 188.0)

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

#5A706E

Mineral Blue · DimGray · Mint Ice

HEX
#5A706E
RGB
rgb(90, 112, 110)
HSL
hsl(175, 11%, 40%)
HSB
hsb(175, 20%, 44%)
CMYK
cmyk(20%, 0%, 2%, 56%)
Oklch
oklch(52.7% 0.026 189.6)

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

#664F2F

Ochre · DarkOliveGreen · Amber Brown

HEX
#664F2F
RGB
rgb(102, 79, 47)
HSL
hsl(35, 37%, 29%)
HSB
hsb(35, 54%, 40%)
CMYK
cmyk(0%, 23%, 54%, 60%)
Oklch
oklch(44.4% 0.056 74.6)

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

#762A1C

Vermilion · Brown · Wine Red

HEX
#762A1C
RGB
rgb(118, 42, 28)
HSL
hsl(9, 62%, 29%)
HSB
hsb(9, 76%, 46%)
CMYK
cmyk(0%, 64%, 76%, 54%)
Oklch
oklch(39.5% 0.110 32.5)

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

#461E12

Crimson · Maroon · Deep Berry

HEX
#461E12
RGB
rgb(70, 30, 18)
HSL
hsl(14, 59%, 17%)
HSB
hsb(14, 74%, 27%)
CMYK
cmyk(0%, 57%, 74%, 73%)
Oklch
oklch(29.0% 0.065 37.4)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2DFDA
DFB3B9

Analogous

B3DFC4
B2DFDA
B3CFDF

Triadic

B2DFDA
DAB3DF
DFDAB3

Split-Comp.

B2DFDA
DFB3CF
DFC4B3

Tetradic

B2DFDA
C4B3DF
DFB3B9
CFDFB3

Contrast Matrix WCAG 2.1 Contrast

B2DFDA
5A706E
664F2F
762A1C
461E12
—
3.6
AA Large
5.3
AA
6.8
AA
9.9
AAA
3.6
AA Large
—
1.5
Fail
1.9
Fail
2.7
Fail
5.3
AA
1.5
Fail
—
1.3
Fail
1.9
Fail
6.8
AA
1.9
Fail
1.3
Fail
—
1.5
Fail
9.9
AAA
2.7
Fail
1.9
Fail
1.5
Fail
—
White BG
1.5Fail
5.3AA
7.7AAA
9.9AAA
14.4AAA
Black BG
14.5AAA
4.0AA Large
2.7Fail
2.1Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C6DB
64646E
5C5C37
55541F
353415

Deuteranopia

C3C0DC
62616F
5D5F39
5A5F20
373A16

Tritanopia

B4DCDC
5B6F6F
653D3E
722223
441718

Achromatopsia

D1D1D1
696969
525252
3F3F3F
292929

Shades & Tints Shades & Tints

#B2DFDA

Dark
Light

#5A706E

Dark
Light

#664F2F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2dfda;
  --color-2: #5a706e;
  --color-3: #664f2f;
  --color-4: #762a1c;
  --color-5: #461e12;
}

SCSS

$color-1: #b2dfda;
$color-2: #5a706e;
$color-3: #664f2f;
$color-4: #762a1c;
$color-5: #461e12;

TAILWIND

colors: {
  'brand-1': '#b2dfda',
  'brand-2': '#5a706e',
  'brand-3': '#664f2f',
  'brand-4': '#762a1c',
  'brand-5': '#461e12',
}

RGB Array

[178, 223, 218], [90, 112, 110], [102, 79, 47], [118, 42, 28], [70, 30, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2DFDA, #5A706E, #664F2F, #762A1C, #461E12 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #b2dfda; --color-2: #5a706e; --color-3: #664f2f; --color-4: #762a1c; --color-5: #461e12. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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. 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