← Back to Editor

#1A4357 · #1A574A · #2E786E · #CCBD8F · #F2E3B6

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

#1A4357

Lake Blue · DarkSlateGray · Prussian Blue

HEX
#1A4357
RGB
rgb(26, 67, 87)
HSL
hsl(200, 54%, 22%)
HSB
hsb(200, 70%, 34%)
CMYK
cmyk(70%, 23%, 0%, 66%)
Oklch
oklch(36.3% 0.057 232.6)

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

#1A574A

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#1A574A
RGB
rgb(26, 87, 74)
HSL
hsl(167, 54%, 22%)
HSB
hsb(167, 70%, 34%)
CMYK
cmyk(70%, 0%, 15%, 66%)
Oklch
oklch(41.4% 0.066 176.0)

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

#2E786E

Mineral Blue · SeaGreen · Mint Ice

HEX
#2E786E
RGB
rgb(46, 120, 110)
HSL
hsl(172, 45%, 33%)
HSB
hsb(172, 62%, 47%)
CMYK
cmyk(62%, 0%, 8%, 53%)
Oklch
oklch(52.4% 0.075 183.1)

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

#CCBD8F

Ginger · Tan · Sunflower

HEX
#CCBD8F
RGB
rgb(204, 189, 143)
HSL
hsl(45, 37%, 68%)
HSB
hsb(45, 30%, 80%)
CMYK
cmyk(0%, 7%, 30%, 20%)
Oklch
oklch(80.0% 0.064 92.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F2E3B6

Goose Yellow · Wheat · Lemon Cream

HEX
#F2E3B6
RGB
rgb(242, 227, 182)
HSL
hsl(45, 70%, 83%)
HSB
hsb(45, 25%, 95%)
CMYK
cmyk(0%, 6%, 25%, 5%)
Oklch
oklch(91.7% 0.061 91.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1A4357
562E1A

Analogous

1A564C
1A4357
1A2456

Triadic

1A4357
561A42
42561A

Split-Comp.

1A4357
561A24
564C1A

Tetradic

1A4357
4C1A56
562E1A
24561A

Contrast Matrix WCAG 2.1 Contrast

1A4357
1A574A
2E786E
CCBD8F
F2E3B6
—
1.3
Fail
2.0
Fail
5.7
AA
8.3
AAA
1.3
Fail
—
1.6
Fail
4.5
AA Large
6.6
AA
2.0
Fail
1.6
Fail
—
2.8
Fail
4.1
AA Large
5.7
AA
4.5
AA Large
2.8
Fail
—
1.5
Fail
8.3
AAA
6.6
AA
4.1
AA Large
1.5
Fail
—
White BG
10.6AAA
8.4AAA
5.2AA
1.9Fail
1.3Fail
Black BG
2.0Fail
2.5Fail
4.0AA Large
11.2AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2C52
34354D
4E4F70
C6C59A
ECEBC1

Deuteranopia

292651
312C4E
4A4471
C6C79D
ECEDC4

Tritanopia

1C4E4E
1D5050
327273
CBA3A5
F1C9CB

Achromatopsia

393939
434343
616161
BCBCBC
E2E2E2

Shades & Tints Shades & Tints

#1A4357

Dark
Light

#1A574A

Dark
Light

#2E786E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1a4357;
  --color-2: #1a574a;
  --color-3: #2e786e;
  --color-4: #ccbd8f;
  --color-5: #f2e3b6;
}

SCSS

$color-1: #1a4357;
$color-2: #1a574a;
$color-3: #2e786e;
$color-4: #ccbd8f;
$color-5: #f2e3b6;

TAILWIND

colors: {
  'brand-1': '#1a4357',
  'brand-2': '#1a574a',
  'brand-3': '#2e786e',
  'brand-4': '#ccbd8f',
  'brand-5': '#f2e3b6',
}

RGB Array

[26, 67, 87], [26, 87, 74], [46, 120, 110], [204, 189, 143], [242, 227, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1A4357, #1A574A, #2E786E, #CCBD8F, #F2E3B6 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: #1a4357; --color-2: #1a574a; --color-3: #2e786e; --color-4: #ccbd8f; --color-5: #f2e3b6. 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