← Back to Editor

#FFC17A · #FF7438 · #FF247B · #5A3078 · #00CAD9

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

#FFC17A

Goose Yellow · LightSalmon · Warm Sun

HEX
#FFC17A
RGB
rgb(255, 193, 122)
HSL
hsl(32, 100%, 74%)
HSB
hsb(32, 52%, 100%)
CMYK
cmyk(0%, 24%, 52%, 0%)
Oklch
oklch(85.2% 0.113 69.1)

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

#FF7438

Apricot · Tomato · Warm Sun

HEX
#FF7438
RGB
rgb(255, 116, 56)
HSL
hsl(18, 100%, 61%)
HSB
hsb(18, 78%, 100%)
CMYK
cmyk(0%, 55%, 78%, 0%)
Oklch
oklch(71.7% 0.184 41.9)

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

#FF247B

Dark Violet · DeepPink · Rose Pink

HEX
#FF247B
RGB
rgb(255, 36, 123)
HSL
hsl(336, 100%, 57%)
HSB
hsb(336, 86%, 100%)
CMYK
cmyk(0%, 86%, 52%, 0%)
Oklch
oklch(65.3% 0.247 5.3)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#5A3078

Dark Plum · DarkSlateBlue · Eggplant

HEX
#5A3078
RGB
rgb(90, 48, 120)
HSL
hsl(275, 43%, 33%)
HSB
hsb(275, 60%, 47%)
CMYK
cmyk(25%, 60%, 0%, 53%)
Oklch
oklch(39.8% 0.122 308.8)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#00CAD9

Lake Blue · DarkTurquoise · Mint Ice

HEX
#00CAD9
RGB
rgb(0, 202, 217)
HSL
hsl(184, 100%, 43%)
HSB
hsb(184, 100%, 85%)
CMYK
cmyk(100%, 7%, 0%, 15%)
Oklch
oklch(76.5% 0.131 204.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFC17A
7AB8FF

Analogous

FF7F7A
FFC17A
FBFF7A

Triadic

FFC17A
7AFFC1
C17AFF

Split-Comp.

FFC17A
7AFBFF
7F7AFF

Tetradic

FFC17A
7AFF7F
7AB8FF
FF7AFB

Contrast Matrix WCAG 2.1 Contrast

FFC17A
FF7438
FF247B
5A3078
00CAD9
—
1.7
Fail
2.3
Fail
6.2
AA
1.3
Fail
1.7
Fail
—
1.3
Fail
3.7
AA Large
1.3
Fail
2.3
Fail
1.3
Fail
—
2.7
Fail
1.8
Fail
6.2
AA
3.7
AA Large
2.7
Fail
—
4.9
AA
1.3
Fail
1.3
Fail
1.8
Fail
4.9
AA
—
White BG
1.6Fail
2.7Fail
3.6AA Large
9.9AAA
2.0Fail
Black BG
13.2AAA
7.8AAA
5.8AA
2.1Fail
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E48B
C3C247
A09E66
484767
5759D5

Deuteranopia

E8EC8F
CBD54A
ADBD61
4A4D62
4C3DD4

Tritanopia

FC999C
F85255
F45552
585956
0AD3D2

Achromatopsia

CBCBCB
979797
6F6F6F
454545
8F8F8F

Shades & Tints Shades & Tints

#FFC17A

Dark
Light

#FF7438

Dark
Light

#FF247B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffc17a;
  --color-2: #ff7438;
  --color-3: #ff247b;
  --color-4: #5a3078;
  --color-5: #00cad9;
}

SCSS

$color-1: #ffc17a;
$color-2: #ff7438;
$color-3: #ff247b;
$color-4: #5a3078;
$color-5: #00cad9;

TAILWIND

colors: {
  'brand-1': '#ffc17a',
  'brand-2': '#ff7438',
  'brand-3': '#ff247b',
  'brand-4': '#5a3078',
  'brand-5': '#00cad9',
}

RGB Array

[255, 193, 122], [255, 116, 56], [255, 36, 123], [90, 48, 120], [0, 202, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFC17A, #FF7438, #FF247B, #5A3078, #00CAD9 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: #ffc17a; --color-2: #ff7438; --color-3: #ff247b; --color-4: #5a3078; --color-5: #00cad9. 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