← Back to Editor

#204759 · #1C8072 · #7BA87B · #B8D2B7 · #F5FBF3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#204759

Slate Blue · DarkSlateGray · Peacock Green

HEX
#204759
RGB
rgb(32, 71, 89)
HSL
hsl(199, 47%, 24%)
HSB
hsb(199, 64%, 35%)
CMYK
cmyk(64%, 20%, 0%, 65%)
Oklch
oklch(37.8% 0.054 230.4)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#1C8072

Mineral Blue · Teal · Mint Ice

HEX
#1C8072
RGB
rgb(28, 128, 114)
HSL
hsl(172, 64%, 31%)
HSB
hsb(172, 78%, 50%)
CMYK
cmyk(78%, 0%, 11%, 50%)
Oklch
oklch(54.2% 0.090 181.0)

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

#7BA87B

Celadon · DarkSeaGreen · Olive Green

HEX
#7BA87B
RGB
rgb(123, 168, 123)
HSL
hsl(120, 21%, 57%)
HSB
hsb(120, 27%, 66%)
CMYK
cmyk(27%, 0%, 27%, 34%)
Oklch
oklch(68.7% 0.081 144.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B8D2B7

Celadon · Silver · Apple Green

HEX
#B8D2B7
RGB
rgb(184, 210, 183)
HSL
hsl(118, 23%, 77%)
HSB
hsb(118, 13%, 82%)
CMYK
cmyk(12%, 0%, 13%, 18%)
Oklch
oklch(83.7% 0.046 144.2)

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

#F5FBF3

Celadon · Snow · Mint Green

HEX
#F5FBF3
RGB
rgb(245, 251, 243)
HSL
hsl(105, 50%, 97%)
HSB
hsb(105, 3%, 98%)
CMYK
cmyk(2%, 0%, 3%, 2%)
Oklch
oklch(98.1% 0.012 137.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

204759
5A3320

Analogous

205A4F
204759
202B5A

Triadic

204759
5A2048
485A20

Split-Comp.

204759
5A202B
5A4F20

Tetradic

204759
4F205A
5A3320
2B5A20

Contrast Matrix WCAG 2.1 Contrast

204759
1C8072
7BA87B
B8D2B7
F5FBF3
—
2.1
Fail
3.7
AA Large
6.1
AA
9.5
AAA
2.1
Fail
—
1.8
Fail
3.0
Fail
4.6
AA
3.7
AA Large
1.8
Fail
—
1.7
Fail
2.6
Fail
6.1
AA
3.0
Fail
1.7
Fail
—
1.5
Fail
9.5
AAA
4.6
AA
2.6
Fail
1.5
Fail
—
White BG
10.0AAA
4.8AA
2.7Fail
1.6Fail
1.1Fail
Black BG
2.1Fail
4.4AA Large
7.7AAA
12.9AAA
20.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313155
474875
8E8F86
C3C3BE
F8F8F5

Deuteranopia

2F2C54
423A76
8C8989
C2C0BF
F7F7F5

Tritanopia

225150
217879
7D8E90
B9C3C4
F5F6F7

Achromatopsia

3D3D3D
616161
959595
C7C7C7
F8F8F8

Shades & Tints Shades & Tints

#204759

Dark
Light

#1C8072

Dark
Light

#7BA87B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #204759;
  --color-2: #1c8072;
  --color-3: #7ba87b;
  --color-4: #b8d2b7;
  --color-5: #f5fbf3;
}

SCSS

$color-1: #204759;
$color-2: #1c8072;
$color-3: #7ba87b;
$color-4: #b8d2b7;
$color-5: #f5fbf3;

TAILWIND

colors: {
  'brand-1': '#204759',
  'brand-2': '#1c8072',
  'brand-3': '#7ba87b',
  'brand-4': '#b8d2b7',
  'brand-5': '#f5fbf3',
}

RGB Array

[32, 71, 89], [28, 128, 114], [123, 168, 123], [184, 210, 183], [245, 251, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #204759, #1C8072, #7BA87B, #B8D2B7, #F5FBF3 is ideal for: 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: #204759; --color-2: #1c8072; --color-3: #7ba87b; --color-4: #b8d2b7; --color-5: #f5fbf3. 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. 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