← Back to Editor

#F2D1C0 · #CDC191 · #C5AA5B · #CA6D5B · #C04679

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F2D1C0

Apricot · Wheat · Peach Orange

HEX
#F2D1C0
RGB
rgb(242, 209, 192)
HSL
hsl(20, 66%, 85%)
HSB
hsb(20, 21%, 95%)
CMYK
cmyk(0%, 14%, 21%, 5%)
Oklch
oklch(88.4% 0.044 48.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CDC191

Ginger · Tan · Sunflower

HEX
#CDC191
RGB
rgb(205, 193, 145)
HSL
hsl(48, 38%, 69%)
HSB
hsb(48, 29%, 80%)
CMYK
cmyk(0%, 6%, 29%, 20%)
Oklch
oklch(80.9% 0.065 95.7)

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

#C5AA5B

Ginger · SandyBrown · Sunflower

HEX
#C5AA5B
RGB
rgb(197, 170, 91)
HSL
hsl(45, 48%, 56%)
HSB
hsb(45, 54%, 77%)
CMYK
cmyk(0%, 14%, 54%, 23%)
Oklch
oklch(74.5% 0.104 90.9)

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

#CA6D5B

Crimson · LightCoral · Passion Red

HEX
#CA6D5B
RGB
rgb(202, 109, 91)
HSL
hsl(10, 51%, 57%)
HSB
hsb(10, 55%, 79%)
CMYK
cmyk(0%, 46%, 55%, 21%)
Oklch
oklch(63.7% 0.122 32.1)

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

#C04679

Dark Violet · MediumVioletRed · Rose Pink

HEX
#C04679
RGB
rgb(192, 70, 121)
HSL
hsl(335, 49%, 51%)
HSB
hsb(335, 64%, 75%)
CMYK
cmyk(0%, 64%, 37%, 25%)
Oklch
oklch(57.5% 0.163 357.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2D1C0
C0E1F2

Analogous

F2C0C8
F2D1C0
F2EAC0

Triadic

F2D1C0
C0F2D0
D0C0F2

Split-Comp.

F2D1C0
C0F2EA
C0C8F2

Tetradic

F2D1C0
C8F2C0
C0E1F2
EAC0F2

Contrast Matrix WCAG 2.1 Contrast

F2D1C0
CDC191
C5AA5B
CA6D5B
C04679
—
1.3
Fail
1.6
Fail
2.5
Fail
3.3
AA Large
1.3
Fail
—
1.3
Fail
2.0
Fail
2.6
Fail
1.6
Fail
1.3
Fail
—
1.6
Fail
2.1
Fail
2.5
Fail
2.0
Fail
1.6
Fail
—
1.3
Fail
3.3
AA Large
2.6
Fail
2.1
Fail
1.3
Fail
—
White BG
1.4Fail
1.8Fail
2.3Fail
3.6AA Large
4.8AA
Black BG
14.7AAA
11.6AAA
9.3AAA
5.8AA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E3C4
C8C89D
B9B96E
A2A15F
8B8A6D

Deuteranopia

E6E8C5
C9C99F
BBBD73
A7AE60
929B6A

Tritanopia

F0C7C8
CCA6A8
C47D81
C56364
BA6361

Achromatopsia

D9D9D9
BFBFBF
A9A9A9
878787
707070

Shades & Tints Shades & Tints

#F2D1C0

Dark
Light

#CDC191

Dark
Light

#C5AA5B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2d1c0;
  --color-2: #cdc191;
  --color-3: #c5aa5b;
  --color-4: #ca6d5b;
  --color-5: #c04679;
}

SCSS

$color-1: #f2d1c0;
$color-2: #cdc191;
$color-3: #c5aa5b;
$color-4: #ca6d5b;
$color-5: #c04679;

TAILWIND

colors: {
  'brand-1': '#f2d1c0',
  'brand-2': '#cdc191',
  'brand-3': '#c5aa5b',
  'brand-4': '#ca6d5b',
  'brand-5': '#c04679',
}

RGB Array

[242, 209, 192], [205, 193, 145], [197, 170, 91], [202, 109, 91], [192, 70, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2D1C0, #CDC191, #C5AA5B, #CA6D5B, #C04679 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: #f2d1c0; --color-2: #cdc191; --color-3: #c5aa5b; --color-4: #ca6d5b; --color-5: #c04679. 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