← Back to Editor

#F9D974 · #F68A5C · #DD4D4D · #06678A · #302E3B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F9D974

Goose Yellow · Khaki · Sunflower

HEX
#F9D974
RGB
rgb(249, 217, 116)
HSL
hsl(46, 92%, 72%)
HSB
hsb(46, 53%, 98%)
CMYK
cmyk(0%, 13%, 53%, 2%)
Oklch
oklch(89.2% 0.126 92.1)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#F68A5C

Apricot · Coral · Warm Sun

HEX
#F68A5C
RGB
rgb(246, 138, 92)
HSL
hsl(18, 90%, 66%)
HSB
hsb(18, 63%, 96%)
CMYK
cmyk(0%, 44%, 63%, 4%)
Oklch
oklch(74.2% 0.145 43.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#DD4D4D

Vermilion · Tomato · Passion Red

HEX
#DD4D4D
RGB
rgb(221, 77, 77)
HSL
hsl(0, 68%, 58%)
HSB
hsb(0, 65%, 87%)
CMYK
cmyk(0%, 65%, 65%, 13%)
Oklch
oklch(61.8% 0.180 24.0)

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

#06678A

Lake Blue · Teal · Mint Ice

HEX
#06678A
RGB
rgb(6, 103, 138)
HSL
hsl(196, 92%, 28%)
HSB
hsb(196, 96%, 54%)
CMYK
cmyk(96%, 25%, 0%, 46%)
Oklch
oklch(48.2% 0.095 231.0)

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

#302E3B

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#302E3B
RGB
rgb(48, 46, 59)
HSL
hsl(249, 12%, 21%)
HSB
hsb(249, 22%, 23%)
CMYK
cmyk(19%, 22%, 0%, 77%)
Oklch
oklch(30.9% 0.023 292.0)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9D974
7695F9

Analogous

F99976
F9D974
D6F976

Triadic

F9D974
76F9DB
DB76F9

Split-Comp.

F9D974
76D6F9
9976F9

Tetradic

F9D974
76F999
7695F9
F976D6

Contrast Matrix WCAG 2.1 Contrast

F9D974
F68A5C
DD4D4D
06678A
302E3B
—
1.7
Fail
2.9
Fail
4.6
AA
9.6
AAA
1.7
Fail
—
1.7
Fail
2.6
Fail
5.5
AA
2.9
Fail
1.7
Fail
—
1.6
Fail
3.3
AA Large
4.6
AA
2.6
Fail
1.6
Fail
—
2.1
Fail
9.6
AAA
5.5
AA
3.3
AA Large
2.1
Fail
—
White BG
1.4Fail
2.4Fail
4.0AA Large
6.3AA
13.3AAA
Black BG
15.2AAA
8.7AAA
5.2AA
3.3AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEB8C
C7C667
9F9D4D
303182
2F2F38

Deuteranopia

EDEF92
CED66A
A7B24D
2A2380
2F2F37

Tritanopia

F7A0A4
F17072
D64D4D
0B7B79
303535

Achromatopsia

D7D7D7
A5A5A5
787878
4E4E4E
303030

Shades & Tints Shades & Tints

#F9D974

Dark
Light

#F68A5C

Dark
Light

#DD4D4D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9d974;
  --color-2: #f68a5c;
  --color-3: #dd4d4d;
  --color-4: #06678a;
  --color-5: #302e3b;
}

SCSS

$color-1: #f9d974;
$color-2: #f68a5c;
$color-3: #dd4d4d;
$color-4: #06678a;
$color-5: #302e3b;

TAILWIND

colors: {
  'brand-1': '#f9d974',
  'brand-2': '#f68a5c',
  'brand-3': '#dd4d4d',
  'brand-4': '#06678a',
  'brand-5': '#302e3b',
}

RGB Array

[249, 217, 116], [246, 138, 92], [221, 77, 77], [6, 103, 138], [48, 46, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9D974, #F68A5C, #DD4D4D, #06678A, #302E3B is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f9d974; --color-2: #f68a5c; --color-3: #dd4d4d; --color-4: #06678a; --color-5: #302e3b. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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