← Back to Editor

#FFA01E · #FFAF07 · #226066 · #053941 · #955683

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

#FFA01E

Ginger · Orange · Warm Sun

HEX
#FFA01E
RGB
rgb(255, 160, 30)
HSL
hsl(35, 100%, 56%)
HSB
hsb(35, 88%, 100%)
CMYK
cmyk(0%, 37%, 88%, 0%)
Oklch
oklch(78.5% 0.167 66.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#FFAF07

Ginger · Orange · Sunflower

HEX
#FFAF07
RGB
rgb(255, 175, 7)
HSL
hsl(41, 100%, 51%)
HSB
hsb(41, 97%, 100%)
CMYK
cmyk(0%, 31%, 97%, 0%)
Oklch
oklch(81.1% 0.170 75.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#226066

Slate Blue · DarkSlateGray · Mint Ice

HEX
#226066
RGB
rgb(34, 96, 102)
HSL
hsl(185, 50%, 27%)
HSB
hsb(185, 67%, 40%)
CMYK
cmyk(67%, 6%, 0%, 60%)
Oklch
oklch(45.2% 0.063 204.1)

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

#053941

Lake Blue · DarkSlateGray · Peacock Green

HEX
#053941
RGB
rgb(5, 57, 65)
HSL
hsl(188, 86%, 14%)
HSB
hsb(188, 92%, 25%)
CMYK
cmyk(92%, 12%, 0%, 75%)
Oklch
oklch(31.7% 0.052 210.8)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#955683

Rose Purple · Gray · Violet

HEX
#955683
RGB
rgb(149, 86, 131)
HSL
hsl(317, 27%, 46%)
HSB
hsb(317, 42%, 58%)
CMYK
cmyk(0%, 42%, 12%, 42%)
Oklch
oklch(54.1% 0.102 338.5)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFA01E
1F7CFF

Analogous

FF311F
FFA01E
ECFF1F

Triadic

FFA01E
1FFFA2
A11FFF

Split-Comp.

FFA01E
1FECFF
311FFF

Tetradic

FFA01E
1FFF31
1F7CFF
FF1FEC

Contrast Matrix WCAG 2.1 Contrast

FFA01E
FFAF07
226066
053941
955683
—
1.1
Fail
3.5
AA Large
6.2
AA
2.6
Fail
1.1
Fail
—
3.9
AA Large
6.8
AA
2.9
Fail
3.5
AA Large
3.9
AA Large
—
1.8
Fail
1.3
Fail
6.2
AA
6.8
AA
1.8
Fail
—
2.4
Fail
2.6
Fail
2.9
Fail
1.3
Fail
2.4
Fail
—
White BG
2.0Fail
1.8Fail
7.2AAA
12.6AAA
5.3AA
Black BG
10.3AAA
11.4AAA
2.9Fail
1.7Fail
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D53D
DCDC30
3D3D65
1C1C3F
7A7978

Deuteranopia

DBE345
E1E739
393564
19153F
7D8275

Tritanopia

FA565C
FB5057
256363
083E3D
92706E

Achromatopsia

AEAEAE
B4B4B4
4E4E4E
2A2A2A
6E6E6E

Shades & Tints Shades & Tints

#FFA01E

Dark
Light

#FFAF07

Dark
Light

#226066

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffa01e;
  --color-2: #ffaf07;
  --color-3: #226066;
  --color-4: #053941;
  --color-5: #955683;
}

SCSS

$color-1: #ffa01e;
$color-2: #ffaf07;
$color-3: #226066;
$color-4: #053941;
$color-5: #955683;

TAILWIND

colors: {
  'brand-1': '#ffa01e',
  'brand-2': '#ffaf07',
  'brand-3': '#226066',
  'brand-4': '#053941',
  'brand-5': '#955683',
}

RGB Array

[255, 160, 30], [255, 175, 7], [34, 96, 102], [5, 57, 65], [149, 86, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFA01E, #FFAF07, #226066, #053941, #955683 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #ffa01e; --color-2: #ffaf07; --color-3: #226066; --color-4: #053941; --color-5: #955683. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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