← Back to Editor

#B37108 · #FA4738 · #8A71A9 · #22A1E7 · #F2EDC9

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

#B37108

Ochre · DarkGoldenRod · Amber Brown

HEX
#B37108
RGB
rgb(179, 113, 8)
HSL
hsl(37, 91%, 37%)
HSB
hsb(37, 96%, 70%)
CMYK
cmyk(0%, 37%, 96%, 30%)
Oklch
oklch(60.5% 0.130 69.0)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#FA4738

Vermilion · Tomato · Passion Red

HEX
#FA4738
RGB
rgb(250, 71, 56)
HSL
hsl(5, 95%, 60%)
HSB
hsb(5, 78%, 98%)
CMYK
cmyk(0%, 72%, 78%, 2%)
Oklch
oklch(65.7% 0.218 29.1)

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

#8A71A9

Deep Indigo · LightSlateGray · Violet

HEX
#8A71A9
RGB
rgb(138, 113, 169)
HSL
hsl(267, 25%, 55%)
HSB
hsb(267, 33%, 66%)
CMYK
cmyk(18%, 33%, 0%, 34%)
Oklch
oklch(59.4% 0.088 304.3)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#22A1E7

Lake Blue · DodgerBlue · Navy Blue

HEX
#22A1E7
RGB
rgb(34, 161, 231)
HSL
hsl(201, 80%, 52%)
HSB
hsb(201, 85%, 91%)
CMYK
cmyk(85%, 30%, 0%, 9%)
Oklch
oklch(67.7% 0.146 240.0)

Traditional「Lake Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#F2EDC9

Fresh Green · Bisque · Lemon Cream

HEX
#F2EDC9
RGB
rgb(242, 237, 201)
HSL
hsl(53, 61%, 87%)
HSB
hsb(53, 17%, 95%)
CMYK
cmyk(0%, 2%, 17%, 5%)
Oklch
oklch(94.1% 0.047 100.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B37108
084AB4

Analogous

B41D08
B37108
A0B408

Triadic

B37108
08B472
7208B4

Split-Comp.

B37108
08A0B4
1D08B4

Tetradic

B37108
08B41D
084AB4
B408A0

Contrast Matrix WCAG 2.1 Contrast

B37108
FA4738
8A71A9
22A1E7
F2EDC9
—
1.1
Fail
1.1
Fail
1.4
Fail
3.4
AA Large
1.1
Fail
—
1.2
Fail
1.2
Fail
2.9
Fail
1.1
Fail
1.2
Fail
—
1.5
Fail
3.5
AA Large
1.4
Fail
1.2
Fail
1.5
Fail
—
2.4
Fail
3.4
AA Large
2.9
Fail
3.5
AA Large
2.4
Fail
—
White BG
4.0AA Large
3.5AA Large
4.2AA Large
2.9Fail
1.2Fail
Black BG
5.3AA
6.0AA
5.0AA
7.3AAA
17.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

969621
ACAB3C
7F7F9B
595AD6
F0F0D2

Deuteranopia

9A9F28
B7C43D
818398
5248D2
F0F0D4

Tritanopia

B0353A
F13E3F
89918E
28C9C6
F2D9DA

Achromatopsia

797979
7B7B7B
7F7F7F
838383
EAEAEA

Shades & Tints Shades & Tints

#B37108

Dark
Light

#FA4738

Dark
Light

#8A71A9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b37108;
  --color-2: #fa4738;
  --color-3: #8a71a9;
  --color-4: #22a1e7;
  --color-5: #f2edc9;
}

SCSS

$color-1: #b37108;
$color-2: #fa4738;
$color-3: #8a71a9;
$color-4: #22a1e7;
$color-5: #f2edc9;

TAILWIND

colors: {
  'brand-1': '#b37108',
  'brand-2': '#fa4738',
  'brand-3': '#8a71a9',
  'brand-4': '#22a1e7',
  'brand-5': '#f2edc9',
}

RGB Array

[179, 113, 8], [250, 71, 56], [138, 113, 169], [34, 161, 231], [242, 237, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B37108, #FA4738, #8A71A9, #22A1E7, #F2EDC9 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: #b37108; --color-2: #fa4738; --color-3: #8a71a9; --color-4: #22a1e7; --color-5: #f2edc9. 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