← Back to Editor

#7CB5A2 · #A4B9A2 · #CBBEA3 · #0368AB · #453231

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

#7CB5A2

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#7CB5A2
RGB
rgb(124, 181, 162)
HSL
hsl(160, 28%, 60%)
HSB
hsb(160, 31%, 71%)
CMYK
cmyk(31%, 0%, 10%, 29%)
Oklch
oklch(72.8% 0.066 171.6)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#A4B9A2

Celadon · DarkGray · Apple Green

HEX
#A4B9A2
RGB
rgb(164, 185, 162)
HSL
hsl(115, 14%, 68%)
HSB
hsb(115, 12%, 73%)
CMYK
cmyk(11%, 0%, 12%, 27%)
Oklch
oklch(76.3% 0.040 142.8)

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

#CBBEA3

Goose Yellow · Tan · Sunflower

HEX
#CBBEA3
RGB
rgb(203, 190, 163)
HSL
hsl(41, 28%, 72%)
HSB
hsb(41, 20%, 80%)
CMYK
cmyk(0%, 6%, 20%, 20%)
Oklch
oklch(80.5% 0.040 85.3)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#0368AB

Lake Blue · Teal · Prussian Blue

HEX
#0368AB
RGB
rgb(3, 104, 171)
HSL
hsl(204, 97%, 34%)
HSB
hsb(204, 98%, 67%)
CMYK
cmyk(98%, 39%, 0%, 33%)
Oklch
oklch(50.4% 0.132 247.4)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#453231

Crimson · DarkSlateGray · Wine Red

HEX
#453231
RGB
rgb(69, 50, 49)
HSL
hsl(3, 17%, 23%)
HSB
hsb(3, 29%, 27%)
CMYK
cmyk(0%, 28%, 29%, 73%)
Oklch
oklch(33.8% 0.028 22.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7CB5A2
B67C8F

Analogous

7CB686
7CB5A2
7CACB6

Triadic

7CB5A2
A37CB6
B6A37C

Split-Comp.

7CB5A2
B67CAC
B6867C

Tetradic

7CB5A2
867CB6
B67C8F
ACB67C

Contrast Matrix WCAG 2.1 Contrast

7CB5A2
A4B9A2
CBBEA3
0368AB
453231
—
1.1
Fail
1.3
Fail
2.5
Fail
5.1
AA
1.1
Fail
—
1.1
Fail
2.8
Fail
5.7
AA
1.3
Fail
1.1
Fail
—
3.2
AA Large
6.5
AA
2.5
Fail
2.8
Fail
3.2
AA Large
—
2.0
Fail
5.1
AA
5.7
AA
6.5
AA
2.0
Fail
—
White BG
2.3Fail
2.1Fail
1.8Fail
5.9AA
12.0AAA
Black BG
9.0AAA
10.0AAA
11.4AAA
3.6AA Large
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9595A7
ADADA8
C5C5AA
2F309B
3D3D31

Deuteranopia

918DA8
ACAAA9
C6C7AB
292197
3E3F31

Tritanopia

7FAAAB
A5ACAD
CAAFB0
088E8B
443131

Achromatopsia

A2A2A2
B0B0B0
BFBFBF
515151
383838

Shades & Tints Shades & Tints

#7CB5A2

Dark
Light

#A4B9A2

Dark
Light

#CBBEA3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7cb5a2;
  --color-2: #a4b9a2;
  --color-3: #cbbea3;
  --color-4: #0368ab;
  --color-5: #453231;
}

SCSS

$color-1: #7cb5a2;
$color-2: #a4b9a2;
$color-3: #cbbea3;
$color-4: #0368ab;
$color-5: #453231;

TAILWIND

colors: {
  'brand-1': '#7cb5a2',
  'brand-2': '#a4b9a2',
  'brand-3': '#cbbea3',
  'brand-4': '#0368ab',
  'brand-5': '#453231',
}

RGB Array

[124, 181, 162], [164, 185, 162], [203, 190, 163], [3, 104, 171], [69, 50, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7CB5A2, #A4B9A2, #CBBEA3, #0368AB, #453231 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: #7cb5a2; --color-2: #a4b9a2; --color-3: #cbbea3; --color-4: #0368ab; --color-5: #453231. 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