← Back to Editor

#B0ECF4 · #B8C140 · #F46286 · #C23B1E · #332B29

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#B0ECF4

Sky Blue · LightBlue · Glacier Blue

HEX
#B0ECF4
RGB
rgb(176, 236, 244)
HSL
hsl(187, 76%, 82%)
HSB
hsb(187, 28%, 96%)
CMYK
cmyk(28%, 3%, 0%, 4%)
Oklch
oklch(90.5% 0.061 206.4)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#B8C140

Autumn Sage · GoldenRod · Honey Gold

HEX
#B8C140
RGB
rgb(184, 193, 64)
HSL
hsl(64, 51%, 50%)
HSB
hsb(64, 67%, 76%)
CMYK
cmyk(5%, 0%, 67%, 24%)
Oklch
oklch(78.0% 0.149 113.2)

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

#F46286

Peach Pink · LightCoral · Coral Red

HEX
#F46286
RGB
rgb(244, 98, 134)
HSL
hsl(345, 87%, 67%)
HSB
hsb(345, 60%, 96%)
CMYK
cmyk(0%, 60%, 45%, 4%)
Oklch
oklch(69.0% 0.181 8.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#C23B1E

Vermilion · FireBrick · Passion Red

HEX
#C23B1E
RGB
rgb(194, 59, 30)
HSL
hsl(11, 73%, 44%)
HSB
hsb(11, 85%, 76%)
CMYK
cmyk(0%, 70%, 85%, 24%)
Oklch
oklch(54.8% 0.176 33.6)

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

#332B29

Crimson · DarkSlateGray · Deep Berry

HEX
#332B29
RGB
rgb(51, 43, 41)
HSL
hsl(12, 11%, 18%)
HSB
hsb(12, 20%, 20%)
CMYK
cmyk(0%, 16%, 20%, 80%)
Oklch
oklch(29.7% 0.012 34.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0ECF4
F4B6AE

Analogous

AEF4D9
B0ECF4
AEC9F4

Triadic

B0ECF4
F4AEEC
ECF4AE

Split-Comp.

B0ECF4
F4AEC9
F4D9AE

Tetradic

B0ECF4
D9AEF4
F4B6AE
C9F4AE

Contrast Matrix WCAG 2.1 Contrast

B0ECF4
B8C140
F46286
C23B1E
332B29
—
1.5
Fail
2.3
Fail
4.1
AA Large
10.6
AAA
1.5
Fail
—
1.5
Fail
2.7
Fail
7.1
AAA
2.3
Fail
1.5
Fail
—
1.8
Fail
4.6
AA
4.1
AA Large
2.7
Fail
1.8
Fail
—
2.6
Fail
10.6
AAA
7.1
AAA
4.6
AA
2.6
Fail
—
White BG
1.3Fail
2.0Fail
3.0AA Large
5.3AA
13.8AAA
Black BG
16.2AAA
10.7AAA
6.9AA
3.9AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACBF2
BCBC5F
B5B37D
888625
302F29

Deuteranopia

C7C2F2
BBBB67
BDC87B
8F9927
30312A

Tritanopia

B3F1F0
B8787D
ED7675
BB2B2C
332A2A

Achromatopsia

DBDBDB
B0B0B0
929292
606060
2D2D2D

Shades & Tints Shades & Tints

#B0ECF4

Dark
Light

#B8C140

Dark
Light

#F46286

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0ecf4;
  --color-2: #b8c140;
  --color-3: #f46286;
  --color-4: #c23b1e;
  --color-5: #332b29;
}

SCSS

$color-1: #b0ecf4;
$color-2: #b8c140;
$color-3: #f46286;
$color-4: #c23b1e;
$color-5: #332b29;

TAILWIND

colors: {
  'brand-1': '#b0ecf4',
  'brand-2': '#b8c140',
  'brand-3': '#f46286',
  'brand-4': '#c23b1e',
  'brand-5': '#332b29',
}

RGB Array

[176, 236, 244], [184, 193, 64], [244, 98, 134], [194, 59, 30], [51, 43, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0ECF4, #B8C140, #F46286, #C23B1E, #332B29 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b0ecf4; --color-2: #b8c140; --color-3: #f46286; --color-4: #c23b1e; --color-5: #332b29. 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 tech, SaaS, healthcare, eco industries. 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