← Back to Editor

#D1B73E · #F7AC01 · #F27018 · #DB2E59 · #171F22

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

#D1B73E

Ginger · GoldenRod · Sunflower

HEX
#D1B73E
RGB
rgb(209, 183, 62)
HSL
hsl(49, 62%, 53%)
HSB
hsb(49, 70%, 82%)
CMYK
cmyk(0%, 12%, 70%, 18%)
Oklch
oklch(78.0% 0.139 96.8)

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

#F7AC01

Ochre · Orange · Honey Gold

HEX
#F7AC01
RGB
rgb(247, 172, 1)
HSL
hsl(42, 99%, 49%)
HSB
hsb(42, 100%, 97%)
CMYK
cmyk(0%, 30%, 100%, 3%)
Oklch
oklch(79.6% 0.166 77.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#F27018

Tangerine · Chocolate · Warm Sun

HEX
#F27018
RGB
rgb(242, 112, 24)
HSL
hsl(24, 89%, 52%)
HSB
hsb(24, 90%, 95%)
CMYK
cmyk(0%, 54%, 90%, 5%)
Oklch
oklch(69.1% 0.182 47.5)

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

#DB2E59

Vermilion · Crimson · Passion Red

HEX
#DB2E59
RGB
rgb(219, 46, 89)
HSL
hsl(345, 71%, 52%)
HSB
hsb(345, 79%, 86%)
CMYK
cmyk(0%, 79%, 59%, 14%)
Oklch
oklch(58.8% 0.207 12.9)

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

#171F22

Slate Blue · Black · Peacock Green

HEX
#171F22
RGB
rgb(23, 31, 34)
HSL
hsl(196, 19%, 11%)
HSB
hsb(196, 32%, 13%)
CMYK
cmyk(32%, 9%, 0%, 87%)
Oklch
oklch(23.3% 0.013 222.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1B73E
3D58D1

Analogous

D16C3D
D1B73E
A2D13D

Triadic

D1B73E
3DD1B6
B63DD1

Split-Comp.

D1B73E
3DA2D1
6C3DD1

Tetradic

D1B73E
3DD16C
3D58D1
D13DA2

Contrast Matrix WCAG 2.1 Contrast

D1B73E
F7AC01
F27018
DB2E59
171F22
—
1.0
Fail
1.5
Fail
2.3
Fail
8.4
AAA
1.0
Fail
—
1.5
Fail
2.4
Fail
8.6
AAA
1.5
Fail
1.5
Fail
—
1.6
Fail
5.7
AA
2.3
Fail
2.4
Fail
1.6
Fail
—
3.6
AA Large
8.4
AAA
8.6
AAA
5.7
AA
3.6
AA Large
—
White BG
2.0Fail
1.9Fail
3.0Fail
4.6AA
16.7AAA
Black BG
10.6AAA
10.9AAA
7.1AAA
4.5AA
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C65B
D7D62A
BAB92D
908F4F
1A1B21

Deuteranopia

C7C962
DBE034
C1CB32
9AA74C
1A1921

Tritanopia

D07277
F34B52
EB3E42
D24645
172121

Achromatopsia

B1B1B1
AFAFAF
8D8D8D
676767
1D1D1D

Shades & Tints Shades & Tints

#D1B73E

Dark
Light

#F7AC01

Dark
Light

#F27018

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1b73e;
  --color-2: #f7ac01;
  --color-3: #f27018;
  --color-4: #db2e59;
  --color-5: #171f22;
}

SCSS

$color-1: #d1b73e;
$color-2: #f7ac01;
$color-3: #f27018;
$color-4: #db2e59;
$color-5: #171f22;

TAILWIND

colors: {
  'brand-1': '#d1b73e',
  'brand-2': '#f7ac01',
  'brand-3': '#f27018',
  'brand-4': '#db2e59',
  'brand-5': '#171f22',
}

RGB Array

[209, 183, 62], [247, 172, 1], [242, 112, 24], [219, 46, 89], [23, 31, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1B73E, #F7AC01, #F27018, #DB2E59, #171F22 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: #d1b73e; --color-2: #f7ac01; --color-3: #f27018; --color-4: #db2e59; --color-5: #171f22. 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