← Back to Editor

#272823 · #FF4A83 · #9DC212 · #988787

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#272823

Ink Black · DarkSlateGray · Dark Stone

HEX
#272823
RGB
rgb(39, 40, 35)
HSL
hsl(72, 7%, 15%)
HSB
hsb(72, 12%, 16%)
CMYK
cmyk(2%, 0%, 13%, 84%)
Oklch
oklch(27.4% 0.009 116.2)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#FF4A83

Rouge · LightCoral · Rose Pink

HEX
#FF4A83
RGB
rgb(255, 74, 131)
HSL
hsl(341, 100%, 65%)
HSB
hsb(341, 71%, 100%)
CMYK
cmyk(0%, 71%, 49%, 0%)
Oklch
oklch(68.1% 0.219 6.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#9DC212

Grass Green · DarkGoldenRod · Olive Green

HEX
#9DC212
RGB
rgb(157, 194, 18)
HSL
hsl(73, 83%, 42%)
HSB
hsb(73, 91%, 76%)
CMYK
cmyk(19%, 0%, 91%, 24%)
Oklch
oklch(76.0% 0.182 122.5)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#988787

Crimson · Gray · Silver Sand

HEX
#988787
RGB
rgb(152, 135, 135)
HSL
hsl(0, 8%, 56%)
HSB
hsb(0, 11%, 60%)
CMYK
cmyk(0%, 11%, 11%, 40%)
Oklch
oklch(63.9% 0.021 17.7)

Traditional「Crimson」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

272823
252429

Analogous

292724
272823
252924

Triadic

272823
242829
292428

Split-Comp.

272823
242529
272429

Tetradic

272823
242927
252429
292425

Contrast Matrix WCAG 2.1 Contrast

272823
FF4A83
9DC212
988787
—
4.6
AA
7.2
AAA
4.3
AA Large
4.6
AA
—
1.5
Fail
1.1
Fail
7.2
AAA
1.5
Fail
—
1.7
Fail
4.3
AA Large
1.1
Fail
1.7
Fail
—
White BG
14.9AAA
3.2AA Large
2.1Fail
3.4AA Large
Black BG
1.4Fail
6.6AA
10.2AAA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

272724
B1AF75
ADAD3D
919087

Deuteranopia

272725
BBC972
ABA847
929387

Tritanopia

272525
F66A68
9F5E66
978787

Achromatopsia

272727
878787
A3A3A3
8C8C8C

Shades & Tints Shades & Tints

#272823

Dark
Light

#FF4A83

Dark
Light

#9DC212

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #272823;
  --color-2: #ff4a83;
  --color-3: #9dc212;
  --color-4: #988787;
}

SCSS

$color-1: #272823;
$color-2: #ff4a83;
$color-3: #9dc212;
$color-4: #988787;

TAILWIND

colors: {
  'brand-1': '#272823',
  'brand-2': '#ff4a83',
  'brand-3': '#9dc212',
  'brand-4': '#988787',
}

RGB Array

[39, 40, 35], [255, 74, 131], [157, 194, 18], [152, 135, 135]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #272823, #FF4A83, #9DC212, #988787 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #272823; --color-2: #ff4a83; --color-3: #9dc212; --color-4: #988787. 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 4-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