← Back to Editor

#F23531 · #E37140 · #C9B65F · #C4BC95 · #75BDAD

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

#F23531

Vermilion · Crimson · Passion Red

HEX
#F23531
RGB
rgb(242, 53, 49)
HSL
hsl(1, 88%, 57%)
HSB
hsb(1, 80%, 95%)
CMYK
cmyk(0%, 78%, 80%, 5%)
Oklch
oklch(62.7% 0.224 27.5)

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

#E37140

Tangerine · Tomato · Warm Sun

HEX
#E37140
RGB
rgb(227, 113, 64)
HSL
hsl(18, 74%, 57%)
HSB
hsb(18, 72%, 89%)
CMYK
cmyk(0%, 50%, 72%, 11%)
Oklch
oklch(67.4% 0.155 42.6)

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

#C9B65F

Ginger · BurlyWood · Sunflower

HEX
#C9B65F
RGB
rgb(201, 182, 95)
HSL
hsl(49, 50%, 58%)
HSB
hsb(49, 53%, 79%)
CMYK
cmyk(0%, 9%, 53%, 21%)
Oklch
oklch(77.4% 0.110 97.3)

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

#C4BC95

Fresh Green · Tan · Sunflower

HEX
#C4BC95
RGB
rgb(196, 188, 149)
HSL
hsl(50, 28%, 68%)
HSB
hsb(50, 24%, 77%)
CMYK
cmyk(0%, 4%, 24%, 23%)
Oklch
oklch(79.2% 0.053 97.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#75BDAD

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#75BDAD
RGB
rgb(117, 189, 173)
HSL
hsl(167, 35%, 60%)
HSB
hsb(167, 38%, 74%)
CMYK
cmyk(38%, 0%, 8%, 26%)
Oklch
oklch(74.6% 0.076 178.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F23531
31EFF2

Analogous

F2318E
F23531
F29531

Triadic

F23531
31F234
3431F2

Split-Comp.

F23531
31F295
318EF2

Tetradic

F23531
8EF231
31EFF2
9531F2

Contrast Matrix WCAG 2.1 Contrast

F23531
E37140
C9B65F
C4BC95
75BDAD
—
1.3
Fail
1.9
Fail
2.1
Fail
1.8
Fail
1.3
Fail
—
1.5
Fail
1.6
Fail
1.4
Fail
1.9
Fail
1.5
Fail
—
1.1
Fail
1.1
Fail
2.1
Fail
1.6
Fail
1.1
Fail
—
1.1
Fail
1.8
Fail
1.4
Fail
1.1
Fail
1.1
Fail
—
White BG
3.9AA Large
3.1AA Large
2.0Fail
1.9Fail
2.2Fail
Black BG
5.3AA
6.7AA
10.3AAA
11.0AAA
9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09E32
B2B14C
C1C174
C1C09E
9495B1

Deuteranopia

ABB932
B8C14F
C2C379
C1C2A1
908BB2

Tritanopia

E93333
DD5557
C88588
C4A6A8
79B4B5

Achromatopsia

6D6D6D
8E8E8E
B2B2B2
BABABA
A6A6A6

Shades & Tints Shades & Tints

#F23531

Dark
Light

#E37140

Dark
Light

#C9B65F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f23531;
  --color-2: #e37140;
  --color-3: #c9b65f;
  --color-4: #c4bc95;
  --color-5: #75bdad;
}

SCSS

$color-1: #f23531;
$color-2: #e37140;
$color-3: #c9b65f;
$color-4: #c4bc95;
$color-5: #75bdad;

TAILWIND

colors: {
  'brand-1': '#f23531',
  'brand-2': '#e37140',
  'brand-3': '#c9b65f',
  'brand-4': '#c4bc95',
  'brand-5': '#75bdad',
}

RGB Array

[242, 53, 49], [227, 113, 64], [201, 182, 95], [196, 188, 149], [117, 189, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F23531, #E37140, #C9B65F, #C4BC95, #75BDAD 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: #f23531; --color-2: #e37140; --color-3: #c9b65f; --color-4: #c4bc95; --color-5: #75bdad. 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