← Back to Editor

#F06664 · #5A8089 · #C19846 · #D0C0A9 · #CF5456

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

#F06664

Peach Pink · Salmon · Coral Red

HEX
#F06664
RGB
rgb(240, 102, 100)
HSL
hsl(1, 82%, 67%)
HSB
hsb(1, 58%, 94%)
CMYK
cmyk(0%, 57%, 58%, 6%)
Oklch
oklch(68.2% 0.171 23.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#5A8089

Slate Blue · SlateGray · Mint Ice

HEX
#5A8089
RGB
rgb(90, 128, 137)
HSL
hsl(191, 21%, 45%)
HSB
hsb(191, 34%, 54%)
CMYK
cmyk(34%, 7%, 0%, 46%)
Oklch
oklch(57.5% 0.045 214.0)

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

#C19846

Ginger · GoldenRod · Sunflower

HEX
#C19846
RGB
rgb(193, 152, 70)
HSL
hsl(40, 50%, 52%)
HSB
hsb(40, 64%, 76%)
CMYK
cmyk(0%, 21%, 64%, 24%)
Oklch
oklch(70.2% 0.111 82.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D0C0A9

Goose Yellow · Silver · Warm Sun

HEX
#D0C0A9
RGB
rgb(208, 192, 169)
HSL
hsl(35, 29%, 74%)
HSB
hsb(35, 19%, 82%)
CMYK
cmyk(0%, 8%, 19%, 18%)
Oklch
oklch(81.5% 0.036 77.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#CF5456

Crimson · Tomato · Passion Red

HEX
#CF5456
RGB
rgb(207, 84, 86)
HSL
hsl(359, 56%, 57%)
HSB
hsb(359, 59%, 81%)
CMYK
cmyk(0%, 59%, 58%, 19%)
Oklch
oklch(60.6% 0.156 22.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F06664
66EEF0

Analogous

F066A9
F06664
F0AD66

Triadic

F06664
66F068
6866F0

Split-Comp.

F06664
66F0AD
66A9F0

Tetradic

F06664
A9F066
66EEF0
AD66F0

Contrast Matrix WCAG 2.1 Contrast

F06664
5A8089
C19846
D0C0A9
CF5456
—
1.4
Fail
1.2
Fail
1.7
Fail
1.3
Fail
1.4
Fail
—
1.6
Fail
2.4
Fail
1.0
Fail
1.2
Fail
1.6
Fail
—
1.5
Fail
1.6
Fail
1.7
Fail
2.4
Fail
1.5
Fail
—
2.3
Fail
1.3
Fail
1.0
Fail
1.6
Fail
2.3
Fail
—
White BG
3.1AA Large
4.3AA Large
2.7Fail
1.8Fail
4.2AA Large
Black BG
6.8AA
4.9AA
7.8AAA
11.8AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B364
6A6B87
AFAF5A
C9C9AF
9A9956

Deuteranopia

BCC765
686586
B2B55F
CACBB0
A1AA55

Tritanopia

E96565
5C8585
BF6A6D
CFB3B4
C95555

Achromatopsia

8F8F8F
767676
9B9B9B
C2C2C2
797979

Shades & Tints Shades & Tints

#F06664

Dark
Light

#5A8089

Dark
Light

#C19846

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f06664;
  --color-2: #5a8089;
  --color-3: #c19846;
  --color-4: #d0c0a9;
  --color-5: #cf5456;
}

SCSS

$color-1: #f06664;
$color-2: #5a8089;
$color-3: #c19846;
$color-4: #d0c0a9;
$color-5: #cf5456;

TAILWIND

colors: {
  'brand-1': '#f06664',
  'brand-2': '#5a8089',
  'brand-3': '#c19846',
  'brand-4': '#d0c0a9',
  'brand-5': '#cf5456',
}

RGB Array

[240, 102, 100], [90, 128, 137], [193, 152, 70], [208, 192, 169], [207, 84, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F06664, #5A8089, #C19846, #D0C0A9, #CF5456 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: #f06664; --color-2: #5a8089; --color-3: #c19846; --color-4: #d0c0a9; --color-5: #cf5456. 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