← Back to Editor

#FDB563 · #FF6B4D · #CE5655 · #692719 · #341B1F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FDB563

Ginger · SandyBrown · Warm Sun

HEX
#FDB563
RGB
rgb(253, 181, 99)
HSL
hsl(32, 97%, 69%)
HSB
hsb(32, 61%, 99%)
CMYK
cmyk(0%, 28%, 61%, 1%)
Oklch
oklch(82.5% 0.129 67.9)

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

#FF6B4D

Peach Pink · Tomato · Coral Red

HEX
#FF6B4D
RGB
rgb(255, 107, 77)
HSL
hsl(10, 100%, 65%)
HSB
hsb(10, 70%, 100%)
CMYK
cmyk(0%, 58%, 70%, 0%)
Oklch
oklch(70.7% 0.187 33.2)

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

#CE5655

Crimson · Tomato · Passion Red

HEX
#CE5655
RGB
rgb(206, 86, 85)
HSL
hsl(0, 55%, 57%)
HSB
hsb(0, 59%, 81%)
CMYK
cmyk(0%, 58%, 59%, 19%)
Oklch
oklch(60.7% 0.153 23.2)

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

#692719

Vermilion · Maroon · Wine Red

HEX
#692719
RGB
rgb(105, 39, 25)
HSL
hsl(11, 62%, 25%)
HSB
hsb(11, 76%, 41%)
CMYK
cmyk(0%, 63%, 76%, 59%)
Oklch
oklch(36.7% 0.098 33.6)

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

#341B1F

Crimson · Black · Deep Berry

HEX
#341B1F
RGB
rgb(52, 27, 31)
HSL
hsl(350, 32%, 15%)
HSB
hsb(350, 48%, 20%)
CMYK
cmyk(0%, 48%, 40%, 80%)
Oklch
oklch(25.8% 0.040 9.9)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDB563
63ABFD

Analogous

FD6863
FDB563
F8FD63

Triadic

FDB563
63FDB5
B563FD

Split-Comp.

FDB563
63F8FD
6863FD

Tetradic

FDB563
63FD68
63ABFD
FD63F8

Contrast Matrix WCAG 2.1 Contrast

FDB563
FF6B4D
CE5655
692719
341B1F
—
1.6
Fail
2.4
Fail
6.3
AA
9.0
AAA
1.6
Fail
—
1.5
Fail
3.9
AA Large
5.6
AA
2.4
Fail
1.5
Fail
—
2.7
Fail
3.8
AA Large
6.3
AA
3.9
AA Large
2.7
Fail
—
1.4
Fail
9.0
AAA
5.6
AA
3.8
AA Large
1.4
Fail
—
White BG
1.8Fail
2.8Fail
4.1AA Large
11.0AAA
15.9AAA
Black BG
12.0AAA
7.5AAA
5.1AA
1.9Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDD77
BFBE54
9A9955
4C4C1C
29291E

Deuteranopia

E2E77C
C8D356
A1AA55
50551D
2B2D1E

Tritanopia

F9878A
F85A5B
C85555
661F20
331D1D

Achromatopsia

C1C1C1
949494
7A7A7A
393939
232323

Shades & Tints Shades & Tints

#FDB563

Dark
Light

#FF6B4D

Dark
Light

#CE5655

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fdb563;
  --color-2: #ff6b4d;
  --color-3: #ce5655;
  --color-4: #692719;
  --color-5: #341b1f;
}

SCSS

$color-1: #fdb563;
$color-2: #ff6b4d;
$color-3: #ce5655;
$color-4: #692719;
$color-5: #341b1f;

TAILWIND

colors: {
  'brand-1': '#fdb563',
  'brand-2': '#ff6b4d',
  'brand-3': '#ce5655',
  'brand-4': '#692719',
  'brand-5': '#341b1f',
}

RGB Array

[253, 181, 99], [255, 107, 77], [206, 86, 85], [105, 39, 25], [52, 27, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FDB563, #FF6B4D, #CE5655, #692719, #341B1F 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: #fdb563; --color-2: #ff6b4d; --color-3: #ce5655; --color-4: #692719; --color-5: #341b1f. 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