← Back to Editor

#30C2B3 · #C8DE21 · #CF2323 · #FFC800

A 4-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 App

Color Details Color Details

#30C2B3

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#30C2B3
RGB
rgb(48, 194, 179)
HSL
hsl(174, 60%, 47%)
HSB
hsb(174, 75%, 76%)
CMYK
cmyk(75%, 0%, 8%, 24%)
Oklch
oklch(73.7% 0.120 184.5)

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

#C8DE21

Autumn Sage · GreenYellow · Honey Gold

HEX
#C8DE21
RGB
rgb(200, 222, 33)
HSL
hsl(67, 74%, 50%)
HSB
hsb(67, 85%, 87%)
CMYK
cmyk(10%, 0%, 85%, 13%)
Oklch
oklch(85.5% 0.190 116.9)

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

#CF2323

Vermilion · FireBrick · Passion Red

HEX
#CF2323
RGB
rgb(207, 35, 35)
HSL
hsl(0, 71%, 47%)
HSB
hsb(0, 83%, 81%)
CMYK
cmyk(0%, 83%, 83%, 19%)
Oklch
oklch(55.1% 0.206 27.3)

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

#FFC800

Ochre · Gold · Honey Gold

HEX
#FFC800
RGB
rgb(255, 200, 0)
HSL
hsl(47, 100%, 50%)
HSB
hsb(47, 100%, 100%)
CMYK
cmyk(0%, 22%, 100%, 0%)
Oklch
oklch(85.7% 0.175 88.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

30C2B3
C0303E

Analogous

30C069
30C2B3
3086C0

Triadic

30C2B3
B130C0
C0B130

Split-Comp.

30C2B3
C03086
C06930

Tetradic

30C2B3
6930C0
C0303E
86C030

Contrast Matrix WCAG 2.1 Contrast

30C2B3
C8DE21
CF2323
FFC800
—
1.5
Fail
2.4
Fail
1.4
Fail
1.5
Fail
—
3.6
AA Large
1.0
Fail
2.4
Fail
3.6
AA Large
—
3.4
AA Large
1.4
Fail
1.0
Fail
3.4
AA Large
—
White BG
2.2Fail
1.5Fail
5.4AA
1.6Fail
Black BG
9.5AAA
13.9AAA
3.9AA Large
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F71B7
D2D24F
858323
E7E730

Deuteranopia

675CB8
D0CF5A
8F9B23
EAEF3C

Tritanopia

37B9BA
C9737B
C62323
FC575F

Achromatopsia

959595
C2C2C2
565656
C2C2C2

Shades & Tints Shades & Tints

#30C2B3

Dark
Light

#C8DE21

Dark
Light

#CF2323

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #30c2b3;
  --color-2: #c8de21;
  --color-3: #cf2323;
  --color-4: #ffc800;
}

SCSS

$color-1: #30c2b3;
$color-2: #c8de21;
$color-3: #cf2323;
$color-4: #ffc800;

TAILWIND

colors: {
  'brand-1': '#30c2b3',
  'brand-2': '#c8de21',
  'brand-3': '#cf2323',
  'brand-4': '#ffc800',
}

RGB Array

[48, 194, 179], [200, 222, 33], [207, 35, 35], [255, 200, 0]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #30C2B3, #C8DE21, #CF2323, #FFC800 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #30c2b3; --color-2: #c8de21; --color-3: #cf2323; --color-4: #ffc800. 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. 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 4-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