← Back to Editor

#0BB582 · #F5F4C4 · #F5D19F · #A17440 · #75522A

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

#0BB582

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#0BB582
RGB
rgb(11, 181, 130)
HSL
hsl(162, 89%, 38%)
HSB
hsb(162, 94%, 71%)
CMYK
cmyk(94%, 0%, 28%, 29%)
Oklch
oklch(68.5% 0.144 164.2)

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

#F5F4C4

Fresh Green · Bisque · Lemon Cream

HEX
#F5F4C4
RGB
rgb(245, 244, 196)
HSL
hsl(59, 71%, 86%)
HSB
hsb(59, 20%, 96%)
CMYK
cmyk(0%, 0%, 20%, 4%)
Oklch
oklch(95.6% 0.062 106.5)

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

#F5D19F

Goose Yellow · Wheat · Peach Orange

HEX
#F5D19F
RGB
rgb(245, 209, 159)
HSL
hsl(35, 81%, 79%)
HSB
hsb(35, 35%, 96%)
CMYK
cmyk(0%, 15%, 35%, 4%)
Oklch
oklch(87.9% 0.076 75.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#A17440

Ochre · Sienna · Amber Brown

HEX
#A17440
RGB
rgb(161, 116, 64)
HSL
hsl(32, 43%, 44%)
HSB
hsb(32, 60%, 63%)
CMYK
cmyk(0%, 28%, 60%, 37%)
Oklch
oklch(59.3% 0.089 68.6)

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

#75522A

Ochre · DarkOliveGreen · Amber Brown

HEX
#75522A
RGB
rgb(117, 82, 42)
HSL
hsl(32, 47%, 31%)
HSB
hsb(32, 64%, 46%)
CMYK
cmyk(0%, 30%, 64%, 54%)
Oklch
oklch(46.8% 0.073 68.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0BB582
B70B3E

Analogous

0BB72D
0BB582
0B95B7

Triadic

0BB582
830BB7
B7830B

Split-Comp.

0BB582
B70B95
B72D0B

Tetradic

0BB582
2D0BB7
B70B3E
95B70B

Contrast Matrix WCAG 2.1 Contrast

0BB582
F5F4C4
F5D19F
A17440
75522A
—
2.3
Fail
1.8
Fail
1.6
Fail
2.7
Fail
2.3
Fail
—
1.3
Fail
3.7
AA Large
6.2
AA
1.8
Fail
1.3
Fail
—
2.9
Fail
4.8
AA
1.6
Fail
3.7
AA Large
2.9
Fail
—
1.7
Fail
2.7
Fail
6.2
AA
4.8
AA
1.7
Fail
—
White BG
2.6Fail
1.1Fail
1.4Fail
4.1AA Large
7.0AAA
Black BG
7.9AAA
18.6AAA
14.5AAA
5.1AA
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

55568E
F5F5D0
E5E5AB
8E8D4D
666634

Deuteranopia

4B3E91
F5F5D2
E8EAAE
909450
686A36

Tritanopia

14989A
F5D9DB
F3B5B7
9F5759
733B3D

Achromatopsia

7C7C7C
EFEFEF
D6D6D6
7C7C7C
585858

Shades & Tints Shades & Tints

#0BB582

Dark
Light

#F5F4C4

Dark
Light

#F5D19F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0bb582;
  --color-2: #f5f4c4;
  --color-3: #f5d19f;
  --color-4: #a17440;
  --color-5: #75522a;
}

SCSS

$color-1: #0bb582;
$color-2: #f5f4c4;
$color-3: #f5d19f;
$color-4: #a17440;
$color-5: #75522a;

TAILWIND

colors: {
  'brand-1': '#0bb582',
  'brand-2': '#f5f4c4',
  'brand-3': '#f5d19f',
  'brand-4': '#a17440',
  'brand-5': '#75522a',
}

RGB Array

[11, 181, 130], [245, 244, 196], [245, 209, 159], [161, 116, 64], [117, 82, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0BB582, #F5F4C4, #F5D19F, #A17440, #75522A 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: #0bb582; --color-2: #f5f4c4; --color-3: #f5d19f; --color-4: #a17440; --color-5: #75522a. 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