← Back to Editor

#F7A387 · #6D4C2B · #DEC195 · #F0E4BC · #9FCFC1

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#F7A387

Apricot · LightSalmon · Warm Sun

HEX
#F7A387
RGB
rgb(247, 163, 135)
HSL
hsl(15, 88%, 75%)
HSB
hsb(15, 45%, 97%)
CMYK
cmyk(0%, 34%, 45%, 3%)
Oklch
oklch(79.2% 0.108 39.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#6D4C2B

Ochre · DarkOliveGreen · Amber Brown

HEX
#6D4C2B
RGB
rgb(109, 76, 43)
HSL
hsl(30, 43%, 30%)
HSB
hsb(30, 61%, 43%)
CMYK
cmyk(0%, 30%, 61%, 57%)
Oklch
oklch(44.5% 0.065 64.8)

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

#DEC195

Goose Yellow · BurlyWood · Warm Sun

HEX
#DEC195
RGB
rgb(222, 193, 149)
HSL
hsl(36, 53%, 73%)
HSB
hsb(36, 33%, 87%)
CMYK
cmyk(0%, 13%, 33%, 13%)
Oklch
oklch(82.5% 0.067 78.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F0E4BC

Goose Yellow · Wheat · Lemon Cream

HEX
#F0E4BC
RGB
rgb(240, 228, 188)
HSL
hsl(46, 63%, 84%)
HSB
hsb(46, 22%, 94%)
CMYK
cmyk(0%, 5%, 22%, 6%)
Oklch
oklch(91.8% 0.054 93.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#9FCFC1

Jade · LightSteelBlue · Lake Green

HEX
#9FCFC1
RGB
rgb(159, 207, 193)
HSL
hsl(162, 33%, 72%)
HSB
hsb(162, 23%, 81%)
CMYK
cmyk(23%, 0%, 7%, 19%)
Oklch
oklch(81.7% 0.054 175.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7A387
87DBF7

Analogous

F787A3
F7A387
F7DB87

Triadic

F7A387
87F7A3
A387F7

Split-Comp.

F7A387
87F7DB
87A3F7

Tetradic

F7A387
A3F787
87DBF7
DB87F7

Contrast Matrix WCAG 2.1 Contrast

F7A387
6D4C2B
DEC195
F0E4BC
9FCFC1
—
3.9
AA Large
1.2
Fail
1.6
Fail
1.2
Fail
3.9
AA Large
—
4.5
AA Large
6.1
AA
4.5
AA Large
1.2
Fail
4.5
AA Large
—
1.4
Fail
1.0
Fail
1.6
Fail
6.1
AA
1.4
Fail
—
1.4
Fail
1.2
Fail
4.5
AA Large
1.0
Fail
1.4
Fail
—
White BG
2.0Fail
7.7AAA
1.7Fail
1.3Fail
1.7Fail
Black BG
10.5AAA
2.7Fail
12.2AAA
16.5AAA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D28E
5F5E33
D1D1A0
EBEBC6
B4B4C4

Deuteranopia

D8DE8F
616335
D3D5A2
ECECC8
B1ADC5

Tritanopia

F39394
6B393B
DDA8AA
EFCDCF
A1C7C8

Achromatopsia

B9B9B9
525252
C5C5C5
E3E3E3
BFBFBF

Shades & Tints Shades & Tints

#F7A387

Dark
Light

#6D4C2B

Dark
Light

#DEC195

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7a387;
  --color-2: #6d4c2b;
  --color-3: #dec195;
  --color-4: #f0e4bc;
  --color-5: #9fcfc1;
}

SCSS

$color-1: #f7a387;
$color-2: #6d4c2b;
$color-3: #dec195;
$color-4: #f0e4bc;
$color-5: #9fcfc1;

TAILWIND

colors: {
  'brand-1': '#f7a387',
  'brand-2': '#6d4c2b',
  'brand-3': '#dec195',
  'brand-4': '#f0e4bc',
  'brand-5': '#9fcfc1',
}

RGB Array

[247, 163, 135], [109, 76, 43], [222, 193, 149], [240, 228, 188], [159, 207, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F7A387, #6D4C2B, #DEC195, #F0E4BC, #9FCFC1 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: #f7a387; --color-2: #6d4c2b; --color-3: #dec195; --color-4: #f0e4bc; --color-5: #9fcfc1. 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 pastel-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