#207AA1 + #455E69 + #474F3C + #403C25 + #2B1B11 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#207AA1

Lake Blue · SteelBlue · Mint Ice

HEX

#207AA1

RGB

rgb(32, 122, 161)

HSL

hsl(198, 67%, 38%)

HSB

hsb(198, 80%, 63%)

CMYK

cmyk(80%, 24%, 0%, 37%)

Oklch

oklch(54.6% 0.101 232.2)

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

#455E69

Slate Blue · DarkSlateGray · Mint Ice

HEX

#455E69

RGB

rgb(69, 94, 105)

HSL

hsl(198, 21%, 34%)

HSB

hsb(198, 34%, 41%)

CMYK

cmyk(34%, 10%, 0%, 59%)

Oklch

oklch(46.6% 0.035 226.8)

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

#474F3C

Grass Green · DarkSlateGray · Forest Green

HEX

#474F3C

RGB

rgb(71, 79, 60)

HSL

hsl(85, 14%, 27%)

HSB

hsb(85, 24%, 31%)

CMYK

cmyk(10%, 0%, 24%, 69%)

Oklch

oklch(41.5% 0.032 126.3)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#403C25

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#403C25

RGB

rgb(64, 60, 37)

HSL

hsl(51, 27%, 20%)

HSB

hsb(51, 42%, 25%)

CMYK

cmyk(0%, 6%, 42%, 75%)

Oklch

oklch(35.4% 0.037 99.6)

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

#2B1B11

Tangerine · Black · Cinnamon

HEX

#2B1B11

RGB

rgb(43, 27, 17)

HSL

hsl(23, 43%, 12%)

HSB

hsb(23, 60%, 17%)

CMYK

cmyk(0%, 37%, 60%, 83%)

Oklch

oklch(24.0% 0.031 52.7)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

207AA1

A24720

Analogous

20A288

207AA1

203AA2

Triadic

207AA1

A2207B

7BA220

Split-Comp.

207AA1

A2203A

A28820

Tetradic

207AA1

8820A2

A24720

3AA220

Contrast Matrix WCAG 2.1 Contrast

207AA1	455E69	474F3C	403C25	2B1B11
—	1.4 Fail	1.8 Fail	2.3 Fail	3.4 AA Large
1.4 Fail	—	1.2 Fail	1.6 Fail	2.4 Fail
1.8 Fail	1.2 Fail	—	1.3 Fail	1.9 Fail
2.3 Fail	1.6 Fail	1.3 Fail	—	1.5 Fail
3.4 AA Large	2.4 Fail	1.9 Fail	1.5 Fail	—

White BG

4.8AA

6.9AA

8.6AAA

11.1AAA

16.6AAA

Black BG

4.4AA Large

3.1AA Large

2.5Fail

1.9Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

474898

505066

4A4B41

3E3E2B

242413

Deuteranopia

423B95

4E4D66

4A4942

3F3F2C

252614

Tritanopia

25908E

466464

474445

402F30

2A1516

Achromatopsia

646464

585858

4A4A4A

3B3B3B

1F1F1F

Shades & Tints Shades & Tints

#207AA1

Dark

Light

#455E69

Dark

Light

#474F3C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #207aa1;
  --color-2: #455e69;
  --color-3: #474f3c;
  --color-4: #403c25;
  --color-5: #2b1b11;
}

SCSS

$color-1: #207aa1;
$color-2: #455e69;
$color-3: #474f3c;
$color-4: #403c25;
$color-5: #2b1b11;

TAILWIND

colors: {
  'brand-1': '#207aa1',
  'brand-2': '#455e69',
  'brand-3': '#474f3c',
  'brand-4': '#403c25',
  'brand-5': '#2b1b11',
}

RGB Array

[32, 122, 161], [69, 94, 105], [71, 79, 60], [64, 60, 37], [43, 27, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #207AA1, #455E69, #474F3C, #403C25, #2B1B11 is ideal for: tech websites, dark mode UIs, game UIs. 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: #207aa1; --color-2: #455e69; --color-3: #474f3c; --color-4: #403c25; --color-5: #2b1b11. 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. 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 cool-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