← Back to Editor

#FFFFFF · #484647 · #FCBE3A · #FF366A · #9EFAF0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#484647

Dark Cyan · DarkSlateGray · Charcoal

HEX
#484647
RGB
rgb(72, 70, 71)
HSL
hsl(330, 1%, 28%)
HSB
hsb(330, 3%, 28%)
CMYK
cmyk(0%, 3%, 1%, 72%)
Oklch
oklch(39.6% 0.003 345.3)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#FCBE3A

Ginger · SandyBrown · Sunflower

HEX
#FCBE3A
RGB
rgb(252, 190, 58)
HSL
hsl(41, 97%, 61%)
HSB
hsb(41, 77%, 99%)
CMYK
cmyk(0%, 25%, 77%, 1%)
Oklch
oklch(83.7% 0.156 81.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FF366A

Rouge · DeepPink · Rose Pink

HEX
#FF366A
RGB
rgb(255, 54, 106)
HSL
hsl(344, 100%, 61%)
HSB
hsb(344, 79%, 100%)
CMYK
cmyk(0%, 79%, 58%, 0%)
Oklch
oklch(65.9% 0.233 12.4)

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

#9EFAF0

Jade · LightBlue · Glacier Blue

HEX
#9EFAF0
RGB
rgb(158, 250, 240)
HSL
hsl(173, 90%, 80%)
HSB
hsb(173, 37%, 98%)
CMYK
cmyk(37%, 0%, 4%, 2%)
Oklch
oklch(92.5% 0.089 187.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFFFF
FFFFFF

Analogous

FFFFFF
FFFFFF
FFFFFF

Triadic

FFFFFF
FFFFFF
FFFFFF

Split-Comp.

FFFFFF
FFFFFF
FFFFFF

Tetradic

FFFFFF
FFFFFF
FFFFFF
FFFFFF

Contrast Matrix WCAG 2.1 Contrast

FFFFFF
484647
FCBE3A
FF366A
9EFAF0
—
9.4
AAA
1.7
Fail
3.5
AA Large
1.2
Fail
9.4
AAA
—
5.6
AA
2.7
Fail
7.8
AAA
1.7
Fail
5.6
AA
—
2.1
Fail
1.4
Fail
3.5
AA Large
2.7
Fail
2.1
Fail
—
2.9
Fail
1.2
Fail
7.8
AAA
1.4
Fail
2.9
Fail
—
White BG
1.0Fail
9.4AAA
1.7Fail
3.5AA Large
1.2Fail
Black BG
21.0AAA
2.2Fail
12.6AAA
6.0AA
17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FFFFFF
474747
E1E15A
A8A65D
C6C7F2

Deuteranopia

FFFFFF
474747
E5E962
B4C35A
C1BAF3

Tritanopia

FFFFFF
484747
F97379
F55351
A3F4F5

Achromatopsia

FFFFFF
474747
C1C1C1
787878
DDDDDD

Shades & Tints Shades & Tints

#FFFFFF

Dark
Light

#484647

Dark
Light

#FCBE3A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffffff;
  --color-2: #484647;
  --color-3: #fcbe3a;
  --color-4: #ff366a;
  --color-5: #9efaf0;
}

SCSS

$color-1: #ffffff;
$color-2: #484647;
$color-3: #fcbe3a;
$color-4: #ff366a;
$color-5: #9efaf0;

TAILWIND

colors: {
  'brand-1': '#ffffff',
  'brand-2': '#484647',
  'brand-3': '#fcbe3a',
  'brand-4': '#ff366a',
  'brand-5': '#9efaf0',
}

RGB Array

[255, 255, 255], [72, 70, 71], [252, 190, 58], [255, 54, 106], [158, 250, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFFFF, #484647, #FCBE3A, #FF366A, #9EFAF0 is ideal for: health products, baby brands, fresh-style blogs, 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: #ffffff; --color-2: #484647; --color-3: #fcbe3a; --color-4: #ff366a; --color-5: #9efaf0. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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