← Back to Editor

#FFF6F0 · #DFE8C6 · #74CCC1 · #577D7B · #70644D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FFF6F0

Apricot · SeaShell · Peach Orange

HEX
#FFF6F0
RGB
rgb(255, 246, 240)
HSL
hsl(24, 100%, 97%)
HSB
hsb(24, 6%, 100%)
CMYK
cmyk(0%, 4%, 6%, 0%)
Oklch
oklch(97.8% 0.013 56.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#DFE8C6

Willow Green · LightGray · Mint Green

HEX
#DFE8C6
RGB
rgb(223, 232, 198)
HSL
hsl(76, 42%, 84%)
HSB
hsb(76, 15%, 91%)
CMYK
cmyk(4%, 0%, 15%, 9%)
Oklch
oklch(91.5% 0.046 119.4)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#74CCC1

Jade · MediumAquaMarine · Lake Green

HEX
#74CCC1
RGB
rgb(116, 204, 193)
HSL
hsl(173, 46%, 63%)
HSB
hsb(173, 43%, 80%)
CMYK
cmyk(43%, 0%, 5%, 20%)
Oklch
oklch(78.7% 0.087 185.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#577D7B

Mineral Blue · DimGray · Mint Ice

HEX
#577D7B
RGB
rgb(87, 125, 123)
HSL
hsl(177, 18%, 42%)
HSB
hsb(177, 30%, 49%)
CMYK
cmyk(30%, 0%, 2%, 51%)
Oklch
oklch(56.1% 0.043 191.9)

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

#70644D

Ochre · DimGray · Amber Brown

HEX
#70644D
RGB
rgb(112, 100, 77)
HSL
hsl(39, 19%, 37%)
HSB
hsb(39, 31%, 44%)
CMYK
cmyk(0%, 11%, 31%, 56%)
Oklch
oklch(50.8% 0.038 83.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF6F0
F0F9FF

Analogous

FFF0F1
FFF6F0
FFFDF0

Triadic

FFF6F0
F0FFF6
F6F0FF

Split-Comp.

FFF6F0
F0FFFD
F0F1FF

Tetradic

FFF6F0
F1FFF0
F0F9FF
FDF0FF

Contrast Matrix WCAG 2.1 Contrast

FFF6F0
DFE8C6
74CCC1
577D7B
70644D
—
1.2
Fail
1.8
Fail
4.3
AA Large
5.4
AA
1.2
Fail
—
1.5
Fail
3.6
AA Large
4.6
AA
1.8
Fail
1.5
Fail
—
2.4
Fail
3.1
AA Large
4.3
AA Large
3.6
AA Large
2.4
Fail
—
1.3
Fail
5.4
AA
4.6
AA
3.1
AA Large
1.3
Fail
—
White BG
1.1Fail
1.3Fail
1.9Fail
4.5AA
5.8AA
Black BG
19.7AAA
16.5AAA
11.1AAA
4.6AA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBF1
E3E3CE
9A9BC4
67687B
6B6B53

Deuteranopia

FCFCF2
E2E2D0
958EC4
65627C
6C6C54

Tritanopia

FFF3F3
DFD5D6
78C6C6
597C7C
6F5758

Achromatopsia

F8F8F8
E1E1E1
B0B0B0
717171
656565

Shades & Tints Shades & Tints

#FFF6F0

Dark
Light

#DFE8C6

Dark
Light

#74CCC1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff6f0;
  --color-2: #dfe8c6;
  --color-3: #74ccc1;
  --color-4: #577d7b;
  --color-5: #70644d;
}

SCSS

$color-1: #fff6f0;
$color-2: #dfe8c6;
$color-3: #74ccc1;
$color-4: #577d7b;
$color-5: #70644d;

TAILWIND

colors: {
  'brand-1': '#fff6f0',
  'brand-2': '#dfe8c6',
  'brand-3': '#74ccc1',
  'brand-4': '#577d7b',
  'brand-5': '#70644d',
}

RGB Array

[255, 246, 240], [223, 232, 198], [116, 204, 193], [87, 125, 123], [112, 100, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF6F0, #DFE8C6, #74CCC1, #577D7B, #70644D 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: #fff6f0; --color-2: #dfe8c6; --color-3: #74ccc1; --color-4: #577d7b; --color-5: #70644d. 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 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