← Back to Editor

#FDDD6E · #FBC16F · #5E3730 · #E12A3E · #A6D4E4

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

#FDDD6E

Goose Yellow · Khaki · Sunflower

HEX
#FDDD6E
RGB
rgb(253, 221, 110)
HSL
hsl(47, 97%, 71%)
HSB
hsb(47, 57%, 99%)
CMYK
cmyk(0%, 13%, 57%, 1%)
Oklch
oklch(90.3% 0.135 93.5)

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

#FBC16F

Goose Yellow · SandyBrown · Warm Sun

HEX
#FBC16F
RGB
rgb(251, 193, 111)
HSL
hsl(35, 95%, 71%)
HSB
hsb(35, 56%, 98%)
CMYK
cmyk(0%, 23%, 56%, 2%)
Oklch
oklch(84.7% 0.120 74.5)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#5E3730

Crimson · DarkOliveGreen · Wine Red

HEX
#5E3730
RGB
rgb(94, 55, 48)
HSL
hsl(9, 32%, 28%)
HSB
hsb(9, 49%, 37%)
CMYK
cmyk(0%, 41%, 49%, 63%)
Oklch
oklch(38.2% 0.058 30.9)

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

#E12A3E

Vermilion · Crimson · Passion Red

HEX
#E12A3E
RGB
rgb(225, 42, 62)
HSL
hsl(353, 75%, 52%)
HSB
hsb(353, 81%, 88%)
CMYK
cmyk(0%, 81%, 72%, 12%)
Oklch
oklch(59.1% 0.215 22.0)

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

#A6D4E4

Sky Blue · LightBlue · Glacier Blue

HEX
#A6D4E4
RGB
rgb(166, 212, 228)
HSL
hsl(195, 53%, 77%)
HSB
hsb(195, 27%, 89%)
CMYK
cmyk(27%, 7%, 0%, 11%)
Oklch
oklch(84.3% 0.053 221.1)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDDD6E
6D8CFD

Analogous

FD966D
FDDD6E
D4FD6D

Triadic

FDDD6E
6DFDDE
DE6DFD

Split-Comp.

FDDD6E
6DD4FD
966DFD

Tetradic

FDDD6E
6DFD96
6D8CFD
FD6DD4

Contrast Matrix WCAG 2.1 Contrast

FDDD6E
FBC16F
5E3730
E12A3E
A6D4E4
—
1.2
Fail
7.6
AAA
3.4
AA Large
1.2
Fail
1.2
Fail
—
6.3
AA
2.8
Fail
1.0
Fail
7.6
AAA
6.3
AA
—
2.2
Fail
6.4
AA
3.4
AA Large
2.8
Fail
2.2
Fail
—
2.9
Fail
1.2
Fail
1.0
Fail
6.4
AA
2.9
Fail
—
White BG
1.3Fail
1.6Fail
10.2AAA
4.6AA
1.6Fail
Black BG
15.7AAA
13.0AAA
2.1Fail
4.6AA
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEF89
E2E183
4D4D32
929039
BABAE0

Deuteranopia

F1F38F
E5EA88
4F5232
9CAA38
B7B4DF

Tritanopia

FB9EA3
F89396
5C3333
D83535
A8DDDC

Achromatopsia

DADADA
C9C9C9
424242
636363
C8C8C8

Shades & Tints Shades & Tints

#FDDD6E

Dark
Light

#FBC16F

Dark
Light

#5E3730

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fddd6e;
  --color-2: #fbc16f;
  --color-3: #5e3730;
  --color-4: #e12a3e;
  --color-5: #a6d4e4;
}

SCSS

$color-1: #fddd6e;
$color-2: #fbc16f;
$color-3: #5e3730;
$color-4: #e12a3e;
$color-5: #a6d4e4;

TAILWIND

colors: {
  'brand-1': '#fddd6e',
  'brand-2': '#fbc16f',
  'brand-3': '#5e3730',
  'brand-4': '#e12a3e',
  'brand-5': '#a6d4e4',
}

RGB Array

[253, 221, 110], [251, 193, 111], [94, 55, 48], [225, 42, 62], [166, 212, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FDDD6E, #FBC16F, #5E3730, #E12A3E, #A6D4E4 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: #fddd6e; --color-2: #fbc16f; --color-3: #5e3730; --color-4: #e12a3e; --color-5: #a6d4e4. 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