← Back to Editor

#F1CF6E · #F27D73 · #867891 · #596365 · #93A099

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

#F1CF6E

Ginger · Khaki · Sunflower

HEX
#F1CF6E
RGB
rgb(241, 207, 110)
HSL
hsl(44, 82%, 69%)
HSB
hsb(44, 54%, 95%)
CMYK
cmyk(0%, 14%, 54%, 5%)
Oklch
oklch(86.4% 0.123 90.4)

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

#F27D73

Peach Pink · Salmon · Coral Red

HEX
#F27D73
RGB
rgb(242, 125, 115)
HSL
hsl(5, 83%, 70%)
HSB
hsb(5, 52%, 95%)
CMYK
cmyk(0%, 48%, 52%, 5%)
Oklch
oklch(72.0% 0.145 26.3)

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

#867891

Dark Plum · Gray · Violet

HEX
#867891
RGB
rgb(134, 120, 145)
HSL
hsl(274, 10%, 52%)
HSB
hsb(274, 17%, 57%)
CMYK
cmyk(8%, 17%, 0%, 43%)
Oklch
oklch(59.4% 0.041 310.2)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#596365

Ink Gray · DimGray · Charcoal

HEX
#596365
RGB
rgb(89, 99, 101)
HSL
hsl(190, 6%, 37%)
HSB
hsb(190, 12%, 40%)
CMYK
cmyk(12%, 2%, 0%, 60%)
Oklch
oklch(49.2% 0.013 211.1)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#93A099

Ash · DarkGray · Silver Sand

HEX
#93A099
RGB
rgb(147, 160, 153)
HSL
hsl(148, 6%, 60%)
HSB
hsb(148, 8%, 63%)
CMYK
cmyk(8%, 0%, 4%, 37%)
Oklch
oklch(69.3% 0.018 162.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1CF6E
6F92F1

Analogous

F18D6F
F1CF6E
D3F16F

Triadic

F1CF6E
6FF1CE
CE6FF1

Split-Comp.

F1CF6E
6FD3F1
8D6FF1

Tetradic

F1CF6E
6FF18D
6F92F1
F16FD3

Contrast Matrix WCAG 2.1 Contrast

F1CF6E
F27D73
867891
596365
93A099
—
1.7
Fail
2.7
Fail
4.1
AA Large
1.8
Fail
1.7
Fail
—
1.6
Fail
2.3
Fail
1.0
Fail
2.7
Fail
1.6
Fail
—
1.5
Fail
1.5
Fail
4.1
AA Large
2.3
Fail
1.5
Fail
—
2.3
Fail
1.8
Fail
1.0
Fail
1.5
Fail
2.3
Fail
—
White BG
1.5Fail
2.6Fail
4.1AA Large
6.2AA
2.7Fail
Black BG
13.9AAA
8.0AAA
5.1AA
3.4AA Large
7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E285
BFBE75
80808B
5D5D65
99999B

Deuteranopia

E4E78B
C6CF76
81828A
5D5C64
98979B

Tritanopia

EF989C
EC7778
858685
5A6464
949C9C

Achromatopsia

CECECE
9F9F9F
7F7F7F
606060
9B9B9B

Shades & Tints Shades & Tints

#F1CF6E

Dark
Light

#F27D73

Dark
Light

#867891

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1cf6e;
  --color-2: #f27d73;
  --color-3: #867891;
  --color-4: #596365;
  --color-5: #93a099;
}

SCSS

$color-1: #f1cf6e;
$color-2: #f27d73;
$color-3: #867891;
$color-4: #596365;
$color-5: #93a099;

TAILWIND

colors: {
  'brand-1': '#f1cf6e',
  'brand-2': '#f27d73',
  'brand-3': '#867891',
  'brand-4': '#596365',
  'brand-5': '#93a099',
}

RGB Array

[241, 207, 110], [242, 125, 115], [134, 120, 145], [89, 99, 101], [147, 160, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1CF6E, #F27D73, #867891, #596365, #93A099 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: #f1cf6e; --color-2: #f27d73; --color-3: #867891; --color-4: #596365; --color-5: #93a099. 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