← Back to Editor

#F7B60E · #9DA618 · #1B887C · #1B387C · #250A23

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

#F7B60E

Ginger · Orange · Sunflower

HEX
#F7B60E
RGB
rgb(247, 182, 14)
HSL
hsl(43, 94%, 51%)
HSB
hsb(43, 94%, 97%)
CMYK
cmyk(0%, 26%, 94%, 3%)
Oklch
oklch(81.5% 0.166 82.2)

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

#9DA618

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#9DA618
RGB
rgb(157, 166, 24)
HSL
hsl(64, 75%, 37%)
HSB
hsb(64, 86%, 65%)
CMYK
cmyk(5%, 0%, 86%, 35%)
Oklch
oklch(69.5% 0.150 113.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#1B887C

Mineral Blue · Teal · Mint Ice

HEX
#1B887C
RGB
rgb(27, 136, 124)
HSL
hsl(173, 67%, 32%)
HSB
hsb(173, 80%, 53%)
CMYK
cmyk(80%, 0%, 9%, 47%)
Oklch
oklch(56.6% 0.094 183.6)

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

#1B387C

Indigo · MidnightBlue · Prussian Blue

HEX
#1B387C
RGB
rgb(27, 56, 124)
HSL
hsl(222, 64%, 30%)
HSB
hsb(222, 78%, 49%)
CMYK
cmyk(78%, 55%, 0%, 51%)
Oklch
oklch(36.2% 0.121 263.9)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#250A23

Rose Purple · Black · Dark Purple

HEX
#250A23
RGB
rgb(37, 10, 35)
HSL
hsl(304, 57%, 9%)
HSB
hsb(304, 73%, 15%)
CMYK
cmyk(0%, 73%, 5%, 85%)
Oklch
oklch(20.2% 0.060 330.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7B60E
0D4FF8

Analogous

F83F0D
F7B60E
C5F80D

Triadic

F7B60E
0DF8B5
B50DF8

Split-Comp.

F7B60E
0DC5F8
3F0DF8

Tetradic

F7B60E
0DF83F
0D4FF8
F80DC5

Contrast Matrix WCAG 2.1 Contrast

F7B60E
9DA618
1B887C
1B387C
250A23
—
1.5
Fail
2.4
Fail
6.1
AA
10.2
AAA
1.5
Fail
—
1.6
Fail
4.2
AA Large
6.9
AA
2.4
Fail
1.6
Fail
—
2.6
Fail
4.2
AA Large
6.1
AA
4.2
AA Large
2.6
Fail
—
1.7
Fail
10.2
AAA
6.9
AA
4.2
AA Large
1.7
Fail
—
White BG
1.8Fail
2.7Fail
4.3AA Large
11.0AAA
18.3AAA
Black BG
11.7AAA
7.9AAA
4.9AA
1.9Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDA37
A1A13A
4A4B7F
28286C
19191D

Deuteranopia

DFE340
A0A043
443C80
262468
1B1D1C

Tritanopia

F4575E
9D555B
208182
1C5F5C
241817

Achromatopsia

B6B6B6
939393
666666
373737
151515

Shades & Tints Shades & Tints

#F7B60E

Dark
Light

#9DA618

Dark
Light

#1B887C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7b60e;
  --color-2: #9da618;
  --color-3: #1b887c;
  --color-4: #1b387c;
  --color-5: #250a23;
}

SCSS

$color-1: #f7b60e;
$color-2: #9da618;
$color-3: #1b887c;
$color-4: #1b387c;
$color-5: #250a23;

TAILWIND

colors: {
  'brand-1': '#f7b60e',
  'brand-2': '#9da618',
  'brand-3': '#1b887c',
  'brand-4': '#1b387c',
  'brand-5': '#250a23',
}

RGB Array

[247, 182, 14], [157, 166, 24], [27, 136, 124], [27, 56, 124], [37, 10, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7B60E, #9DA618, #1B887C, #1B387C, #250A23 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: #f7b60e; --color-2: #9da618; --color-3: #1b887c; --color-4: #1b387c; --color-5: #250a23. 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