← Back to Editor

#4BB1B3 · #F7E715 · #CE8400 · #B00951 · #3B0025

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

#4BB1B3

Slate Blue · CadetBlue · Mint Ice

HEX
#4BB1B3
RGB
rgb(75, 177, 179)
HSL
hsl(181, 41%, 50%)
HSB
hsb(181, 58%, 70%)
CMYK
cmyk(58%, 1%, 0%, 30%)
Oklch
oklch(70.2% 0.094 197.0)

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

#F7E715

Autumn Sage · Gold · Sunflower

HEX
#F7E715
RGB
rgb(247, 231, 21)
HSL
hsl(56, 93%, 53%)
HSB
hsb(56, 91%, 97%)
CMYK
cmyk(0%, 6%, 91%, 3%)
Oklch
oklch(91.2% 0.190 104.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CE8400

Ochre · DarkGoldenRod · Amber Brown

HEX
#CE8400
RGB
rgb(206, 132, 0)
HSL
hsl(38, 100%, 40%)
HSB
hsb(38, 100%, 81%)
CMYK
cmyk(0%, 36%, 100%, 19%)
Oklch
oklch(67.4% 0.146 70.4)

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

#B00951

Dark Violet · Crimson · Camellia

HEX
#B00951
RGB
rgb(176, 9, 81)
HSL
hsl(334, 90%, 36%)
HSB
hsb(334, 95%, 69%)
CMYK
cmyk(0%, 95%, 54%, 31%)
Oklch
oklch(49.0% 0.193 5.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#3B0025

Rose Purple · Black · Raspberry

HEX
#3B0025
RGB
rgb(59, 0, 37)
HSL
hsl(322, 100%, 12%)
HSB
hsb(322, 100%, 23%)
CMYK
cmyk(0%, 100%, 37%, 77%)
Oklch
oklch(23.3% 0.098 348.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4BB1B3
B44D4B

Analogous

4BB481
4BB1B3
4B7EB4

Triadic

4BB1B3
B44BB2
B2B44B

Split-Comp.

4BB1B3
B44B7E
B4814B

Tetradic

4BB1B3
814BB4
B44D4B
7EB44B

Contrast Matrix WCAG 2.1 Contrast

4BB1B3
F7E715
CE8400
B00951
3B0025
—
2.0
Fail
1.2
Fail
2.7
Fail
6.8
AA
2.0
Fail
—
2.4
Fail
5.5
AA
13.5
AAA
1.2
Fail
2.4
Fail
—
2.3
Fail
5.7
AA
2.7
Fail
5.5
AA
2.3
Fail
—
2.5
Fail
6.8
AA
13.5
AAA
5.7
AA
2.5
Fail
—
White BG
2.5Fail
1.3Fail
3.0AA Large
7.0AA
17.3AAA
Black BG
8.2AAA
16.4AAA
6.9AA
3.0AA Large
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7778B3
F0F048
AEAD20
686640
21211C

Deuteranopia

716AB2
F1F254
B2B828
717E3B
25291A

Tritanopia

50B2B2
F67079
CA393F
A8322F
381513

Achromatopsia

939393
D4D4D4
8B8B8B
434343
161616

Shades & Tints Shades & Tints

#4BB1B3

Dark
Light

#F7E715

Dark
Light

#CE8400

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4bb1b3;
  --color-2: #f7e715;
  --color-3: #ce8400;
  --color-4: #b00951;
  --color-5: #3b0025;
}

SCSS

$color-1: #4bb1b3;
$color-2: #f7e715;
$color-3: #ce8400;
$color-4: #b00951;
$color-5: #3b0025;

TAILWIND

colors: {
  'brand-1': '#4bb1b3',
  'brand-2': '#f7e715',
  'brand-3': '#ce8400',
  'brand-4': '#b00951',
  'brand-5': '#3b0025',
}

RGB Array

[75, 177, 179], [247, 231, 21], [206, 132, 0], [176, 9, 81], [59, 0, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4BB1B3, #F7E715, #CE8400, #B00951, #3B0025 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: #4bb1b3; --color-2: #f7e715; --color-3: #ce8400; --color-4: #b00951; --color-5: #3b0025. 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