← Back to Editor

#207A94 · #6A878B · #C58A6C · #EDA457 · #F1B74C

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 Library

Color Details Color Details

#207A94

Lake Blue · Teal · Mint Ice

HEX
#207A94
RGB
rgb(32, 122, 148)
HSL
hsl(193, 64%, 35%)
HSB
hsb(193, 78%, 58%)
CMYK
cmyk(78%, 18%, 0%, 42%)
Oklch
oklch(54.0% 0.090 222.0)

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

#6A878B

Slate Blue · SlateGray · Mint Ice

HEX
#6A878B
RGB
rgb(106, 135, 139)
HSL
hsl(187, 13%, 48%)
HSB
hsb(187, 24%, 55%)
CMYK
cmyk(24%, 3%, 0%, 45%)
Oklch
oklch(60.2% 0.033 206.7)

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

#C58A6C

Tangerine · DarkSalmon · Warm Sun

HEX
#C58A6C
RGB
rgb(197, 138, 108)
HSL
hsl(20, 43%, 60%)
HSB
hsb(20, 45%, 77%)
CMYK
cmyk(0%, 30%, 45%, 23%)
Oklch
oklch(68.5% 0.084 47.8)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#EDA457

Ginger · SandyBrown · Warm Sun

HEX
#EDA457
RGB
rgb(237, 164, 87)
HSL
hsl(31, 81%, 64%)
HSB
hsb(31, 63%, 93%)
CMYK
cmyk(0%, 31%, 63%, 7%)
Oklch
oklch(77.5% 0.127 65.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#F1B74C

Ginger · SandyBrown · Warm Sun

HEX
#F1B74C
RGB
rgb(241, 183, 76)
HSL
hsl(39, 85%, 62%)
HSB
hsb(39, 68%, 95%)
CMYK
cmyk(0%, 24%, 68%, 5%)
Oklch
oklch(81.4% 0.138 79.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

207A94
923920

Analogous

209272
207A94
204092

Triadic

207A94
92207A
7A9220

Split-Comp.

207A94
922040
927220

Tetradic

207A94
722092
923920
409220

Contrast Matrix WCAG 2.1 Contrast

207A94
6A878B
C58A6C
EDA457
F1B74C
—
1.3
Fail
1.7
Fail
2.4
Fail
2.7
Fail
1.3
Fail
—
1.3
Fail
1.8
Fail
2.1
Fail
1.7
Fail
1.3
Fail
—
1.4
Fail
1.6
Fail
2.4
Fail
1.8
Fail
1.4
Fail
—
1.2
Fail
2.7
Fail
2.1
Fail
1.6
Fail
1.2
Fail
—
White BG
4.9AA
3.9AA Large
2.9Fail
2.1Fail
1.8Fail
Black BG
4.3AA Large
5.5AA
7.2AAA
10.0AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47488E
77778A
ABAB73
CDCD6A
D8D766

Deuteranopia

423B8C
75738A
AFB375
D2D76E
DBE06C

Tritanopia

258988
6B8989
C2797A
E9787C
EE7A7F

Achromatopsia

626262
7F7F7F
989898
B1B1B1
BCBCBC

Shades & Tints Shades & Tints

#207A94

Dark
Light

#6A878B

Dark
Light

#C58A6C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #207a94;
  --color-2: #6a878b;
  --color-3: #c58a6c;
  --color-4: #eda457;
  --color-5: #f1b74c;
}

SCSS

$color-1: #207a94;
$color-2: #6a878b;
$color-3: #c58a6c;
$color-4: #eda457;
$color-5: #f1b74c;

TAILWIND

colors: {
  'brand-1': '#207a94',
  'brand-2': '#6a878b',
  'brand-3': '#c58a6c',
  'brand-4': '#eda457',
  'brand-5': '#f1b74c',
}

RGB Array

[32, 122, 148], [106, 135, 139], [197, 138, 108], [237, 164, 87], [241, 183, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #207A94, #6A878B, #C58A6C, #EDA457, #F1B74C is ideal for: corporate websites, product showcases, portfolios. 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: #207a94; --color-2: #6a878b; --color-3: #c58a6c; --color-4: #eda457; --color-5: #f1b74c. 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. 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