#F03355 + #AB445C + #54392C + #9E9C23 + #D9D63B · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F03355

Vermilion · Crimson · Passion Red

HEX

#F03355

RGB

rgb(240, 51, 85)

HSL

hsl(349, 86%, 57%)

HSB

hsb(349, 79%, 94%)

CMYK

cmyk(0%, 79%, 65%, 6%)

Oklch

oklch(62.7% 0.221 17.3)

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

#AB445C

Crimson · Sienna · Passion Red

HEX

#AB445C

RGB

rgb(171, 68, 92)

HSL

hsl(346, 43%, 47%)

HSB

hsb(346, 60%, 67%)

CMYK

cmyk(0%, 60%, 46%, 33%)

Oklch

oklch(53.1% 0.136 8.6)

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

#54392C

Tangerine · DarkOliveGreen · Cinnamon

HEX

#54392C

RGB

rgb(84, 57, 44)

HSL

hsl(20, 31%, 25%)

HSB

hsb(20, 48%, 33%)

CMYK

cmyk(0%, 32%, 48%, 67%)

Oklch

oklch(37.2% 0.044 46.6)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#9E9C23

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#9E9C23

RGB

rgb(158, 156, 35)

HSL

hsl(59, 64%, 38%)

HSB

hsb(59, 78%, 62%)

CMYK

cmyk(0%, 1%, 78%, 38%)

Oklch

oklch(67.3% 0.135 108.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#D9D63B

Autumn Sage · GoldenRod · Sunflower

HEX

#D9D63B

RGB

rgb(217, 214, 59)

HSL

hsl(59, 68%, 54%)

HSB

hsb(59, 73%, 85%)

CMYK

cmyk(0%, 1%, 73%, 15%)

Oklch

oklch(85.2% 0.167 108.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F03355

33F0CD

Analogous

F033B4

F03355

F06F33

Triadic

F03355

56F033

3356F0

Split-Comp.

F03355

33F06F

33B4F0

Tetradic

F03355

B4F033

33F0CD

6F33F0

Contrast Matrix WCAG 2.1 Contrast

F03355	AB445C	54392C	9E9C23	D9D63B
—	1.4 Fail	2.7 Fail	1.4 Fail	2.6 Fail
1.4 Fail	—	1.9 Fail	1.9 Fail	3.7 AA Large
2.7 Fail	1.9 Fail	—	3.6 AA Large	6.8 AA
1.4 Fail	1.9 Fail	3.6 AA Large	—	1.9 Fail
2.6 Fail	3.7 AA Large	6.8 AA	1.9 Fail	—

White BG

4.0AA Large

5.7AA

10.5AAA

2.9Fail

1.5Fail

Black BG

5.3AA

3.7AA Large

2.0Fail

7.2AAA

13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9C4D

7E7D56

48482F

9D9D40

D8D861

Deuteranopia

A9B74B

848C55

4A4C30

9D9D47

D8D86A

Tritanopia

E74645

A65251

533232

9E575C

D97E85

Achromatopsia

6F6F6F

666666

404040

8F8F8F

C5C5C5

Shades & Tints Shades & Tints

#F03355

Dark

Light

#AB445C

Dark

Light

#54392C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f03355;
  --color-2: #ab445c;
  --color-3: #54392c;
  --color-4: #9e9c23;
  --color-5: #d9d63b;
}

SCSS

$color-1: #f03355;
$color-2: #ab445c;
$color-3: #54392c;
$color-4: #9e9c23;
$color-5: #d9d63b;

TAILWIND

colors: {
  'brand-1': '#f03355',
  'brand-2': '#ab445c',
  'brand-3': '#54392c',
  'brand-4': '#9e9c23',
  'brand-5': '#d9d63b',
}

RGB Array

[240, 51, 85], [171, 68, 92], [84, 57, 44], [158, 156, 35], [217, 214, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #F03355, #AB445C, #54392C, #9E9C23, #D9D63B 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: #f03355; --color-2: #ab445c; --color-3: #54392c; --color-4: #9e9c23; --color-5: #d9d63b. 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 coffee-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