← Back to Editor

#0F8071 · #9E9023 · #D98027 · #BD1919 · #2B1B05

pastel

A 5-color pastel palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#0F8071

Mineral Blue · Teal · Mint Ice

HEX
#0F8071
RGB
rgb(15, 128, 113)
HSL
hsl(172, 79%, 28%)
HSB
hsb(172, 88%, 50%)
CMYK
cmyk(88%, 0%, 12%, 50%)
Oklch
oklch(53.9% 0.094 180.5)

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

#9E9023

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#9E9023
RGB
rgb(158, 144, 35)
HSL
hsl(53, 64%, 38%)
HSB
hsb(53, 78%, 62%)
CMYK
cmyk(0%, 9%, 78%, 38%)
Oklch
oklch(64.7% 0.124 101.6)

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

#D98027

Ochre · Chocolate · Amber Brown

HEX
#D98027
RGB
rgb(217, 128, 39)
HSL
hsl(30, 70%, 50%)
HSB
hsb(30, 82%, 85%)
CMYK
cmyk(0%, 41%, 82%, 15%)
Oklch
oklch(68.2% 0.146 59.9)

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

#BD1919

Vermilion · FireBrick · Passion Red

HEX
#BD1919
RGB
rgb(189, 25, 25)
HSL
hsl(0, 77%, 42%)
HSB
hsb(0, 87%, 74%)
CMYK
cmyk(0%, 87%, 87%, 26%)
Oklch
oklch(51.1% 0.196 27.8)

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

#2B1B05

Ochre · Black · Cinnamon

HEX
#2B1B05
RGB
rgb(43, 27, 5)
HSL
hsl(35, 79%, 9%)
HSB
hsb(35, 88%, 17%)
CMYK
cmyk(0%, 37%, 88%, 83%)
Oklch
oklch(23.8% 0.043 72.4)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0F8071
800F1E

Analogous

0F8038
0F8071
0F5680

Triadic

0F8071
710F80
80710F

Split-Comp.

0F8071
800F56
80380F

Tetradic

0F8071
380F80
800F1E
56800F

Contrast Matrix WCAG 2.1 Contrast

0F8071
9E9023
D98027
BD1919
2B1B05
—
1.5
Fail
1.6
Fail
1.3
Fail
3.4
AA Large
1.5
Fail
—
1.1
Fail
1.9
Fail
5.1
AA
1.6
Fail
1.1
Fail
—
2.1
Fail
5.6
AA
1.3
Fail
1.9
Fail
2.1
Fail
—
2.6
Fail
3.4
AA Large
5.1
AA
5.6
AA
2.6
Fail
—
White BG
4.8AA
3.2AA Large
3.0Fail
6.3AA
16.6AAA
Black BG
4.3AA Large
6.5AA
7.1AAA
3.3AA Large
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

404175
98983D
B2B23D
767519
24240A

Deuteranopia

393176
999A44
B8BE42
808C19
25260C

Tritanopia

157778
9D5257
D54E51
B51919
2A0F0F

Achromatopsia

5D5D5D
888888
909090
4A4A4A
1D1D1D

Shades & Tints Shades & Tints

#0F8071

Dark
Light

#9E9023

Dark
Light

#D98027

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0f8071;
  --color-2: #9e9023;
  --color-3: #d98027;
  --color-4: #bd1919;
  --color-5: #2b1b05;
}

SCSS

$color-1: #0f8071;
$color-2: #9e9023;
$color-3: #d98027;
$color-4: #bd1919;
$color-5: #2b1b05;

TAILWIND

colors: {
  'brand-1': '#0f8071',
  'brand-2': '#9e9023',
  'brand-3': '#d98027',
  'brand-4': '#bd1919',
  'brand-5': '#2b1b05',
}

RGB Array

[15, 128, 113], [158, 144, 35], [217, 128, 39], [189, 25, 25], [43, 27, 5]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #0F8071, #9E9023, #D98027, #BD1919, #2B1B05 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: #0f8071; --color-2: #9e9023; --color-3: #d98027; --color-4: #bd1919; --color-5: #2b1b05. 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 pastel-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