← Back to Editor

#FFFDFA · #897870 · #444037 · #3C362A · #28201D

space

A 5-color space 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

#FFFDFA

Goose Yellow · Snow · Peach Orange

HEX
#FFFDFA
RGB
rgb(255, 253, 250)
HSL
hsl(36, 100%, 99%)
HSB
hsb(36, 2%, 100%)
CMYK
cmyk(0%, 1%, 2%, 0%)
Oklch
oklch(99.5% 0.005 78.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#897870

Tangerine · Gray · Amber Brown

HEX
#897870
RGB
rgb(137, 120, 112)
HSL
hsl(19, 10%, 49%)
HSB
hsb(19, 18%, 54%)
CMYK
cmyk(0%, 12%, 18%, 46%)
Oklch
oklch(58.6% 0.024 46.8)

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

#444037

Ochre · DarkSlateGray · Amber Gold

HEX
#444037
RGB
rgb(68, 64, 55)
HSL
hsl(42, 11%, 24%)
HSB
hsb(42, 19%, 27%)
CMYK
cmyk(0%, 6%, 19%, 73%)
Oklch
oklch(37.3% 0.016 86.9)

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

#3C362A

Ochre · DarkSlateGray · Amber Gold

HEX
#3C362A
RGB
rgb(60, 54, 42)
HSL
hsl(40, 18%, 20%)
HSB
hsb(40, 30%, 24%)
CMYK
cmyk(0%, 10%, 30%, 76%)
Oklch
oklch(33.5% 0.022 84.5)

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

#28201D

Tangerine · Black · Cinnamon

HEX
#28201D
RGB
rgb(40, 32, 29)
HSL
hsl(16, 16%, 14%)
HSB
hsb(16, 28%, 16%)
CMYK
cmyk(0%, 20%, 27%, 84%)
Oklch
oklch(25.2% 0.014 41.6)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFDFA
FAFCFF

Analogous

FFFAFA
FFFDFA
FEFFFA

Triadic

FFFDFA
FAFFFD
FDFAFF

Split-Comp.

FFFDFA
FAFEFF
FAFAFF

Tetradic

FFFDFA
FAFFFA
FAFCFF
FFFAFE

Contrast Matrix WCAG 2.1 Contrast

FFFDFA
897870
444037
3C362A
28201D
—
4.1
AA Large
10.2
AAA
11.8
AAA
15.7
AAA
4.1
AA Large
—
2.5
Fail
2.8
Fail
3.8
AA Large
10.2
AAA
2.5
Fail
—
1.2
Fail
1.5
Fail
11.8
AAA
2.8
Fail
1.2
Fail
—
1.3
Fail
15.7
AAA
3.8
AA Large
1.5
Fail
1.3
Fail
—
White BG
1.0Fail
4.2AA Large
10.3AAA
12.0AAA
16.0AAA
Black BG
20.7AAA
5.0AA
2.0Fail
1.8Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FEFEFB
828172
424239
39392D
25241E

Deuteranopia

FEFEFB
838472
43433A
3A3A2E
25261E

Tritanopia

FFFBFB
887374
443B3B
3C2F30
281E1E

Achromatopsia

FDFDFD
7C7C7C
404040
363636
222222

Shades & Tints Shades & Tints

#FFFDFA

Dark
Light

#897870

Dark
Light

#444037

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fffdfa;
  --color-2: #897870;
  --color-3: #444037;
  --color-4: #3c362a;
  --color-5: #28201d;
}

SCSS

$color-1: #fffdfa;
$color-2: #897870;
$color-3: #444037;
$color-4: #3c362a;
$color-5: #28201d;

TAILWIND

colors: {
  'brand-1': '#fffdfa',
  'brand-2': '#897870',
  'brand-3': '#444037',
  'brand-4': '#3c362a',
  'brand-5': '#28201d',
}

RGB Array

[255, 253, 250], [137, 120, 112], [68, 64, 55], [60, 54, 42], [40, 32, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #FFFDFA, #897870, #444037, #3C362A, #28201D 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: #fffdfa; --color-2: #897870; --color-3: #444037; --color-4: #3c362a; --color-5: #28201d. 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 space-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