← Back to Editor

#369699 · #79B8B6 · #AFCCA8 · #F5F2C1 · #FD9B6E

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

#369699

Slate Blue · SteelBlue · Mint Ice

HEX
#369699
RGB
rgb(54, 150, 153)
HSL
hsl(182, 48%, 41%)
HSB
hsb(182, 65%, 60%)
CMYK
cmyk(65%, 2%, 0%, 40%)
Oklch
oklch(61.9% 0.088 198.1)

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

#79B8B6

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#79B8B6
RGB
rgb(121, 184, 182)
HSL
hsl(178, 31%, 60%)
HSB
hsb(178, 34%, 72%)
CMYK
cmyk(34%, 0%, 1%, 28%)
Oklch
oklch(74.0% 0.065 193.3)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#AFCCA8

Celadon · Silver · Apple Green

HEX
#AFCCA8
RGB
rgb(175, 204, 168)
HSL
hsl(108, 26%, 73%)
HSB
hsb(108, 18%, 80%)
CMYK
cmyk(14%, 0%, 18%, 20%)
Oklch
oklch(81.4% 0.059 139.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#F5F2C1

Fresh Green · Bisque · Lemon Cream

HEX
#F5F2C1
RGB
rgb(245, 242, 193)
HSL
hsl(57, 72%, 86%)
HSB
hsb(57, 21%, 96%)
CMYK
cmyk(0%, 1%, 21%, 4%)
Oklch
oklch(95.1% 0.063 104.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#FD9B6E

Apricot · LightSalmon · Warm Sun

HEX
#FD9B6E
RGB
rgb(253, 155, 110)
HSL
hsl(19, 97%, 71%)
HSB
hsb(19, 57%, 99%)
CMYK
cmyk(0%, 39%, 57%, 1%)
Oklch
oklch(78.1% 0.132 45.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

369699
9B3A36

Analogous

369B6C
369699
36659B

Triadic

369699
9B3697
979B36

Split-Comp.

369699
9B3665
9B6C36

Tetradic

369699
6C369B
9B3A36
659B36

Contrast Matrix WCAG 2.1 Contrast

369699
79B8B6
AFCCA8
F5F2C1
FD9B6E
—
1.6
Fail
2.0
Fail
3.1
AA Large
1.7
Fail
1.6
Fail
—
1.3
Fail
2.0
Fail
1.1
Fail
2.0
Fail
1.3
Fail
—
1.5
Fail
1.2
Fail
3.1
AA Large
2.0
Fail
1.5
Fail
—
1.8
Fail
1.7
Fail
1.1
Fail
1.2
Fail
1.8
Fail
—
White BG
3.5AA Large
2.2Fail
1.7Fail
1.1Fail
2.1Fail
Black BG
6.0AA
9.3AAA
12.0AAA
18.4AAA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

606098
9495B6
BCBCB1
F4F4CD
D3D279

Deuteranopia

5A5398
918CB7
BAB8B3
F4F4D0
D8E07C

Tritanopia

3B9898
7CB7B7
B0B8B9
F5D6D8
F88183

Achromatopsia

7A7A7A
A5A5A5
BFBFBF
EDEDED
B3B3B3

Shades & Tints Shades & Tints

#369699

Dark
Light

#79B8B6

Dark
Light

#AFCCA8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #369699;
  --color-2: #79b8b6;
  --color-3: #afcca8;
  --color-4: #f5f2c1;
  --color-5: #fd9b6e;
}

SCSS

$color-1: #369699;
$color-2: #79b8b6;
$color-3: #afcca8;
$color-4: #f5f2c1;
$color-5: #fd9b6e;

TAILWIND

colors: {
  'brand-1': '#369699',
  'brand-2': '#79b8b6',
  'brand-3': '#afcca8',
  'brand-4': '#f5f2c1',
  'brand-5': '#fd9b6e',
}

RGB Array

[54, 150, 153], [121, 184, 182], [175, 204, 168], [245, 242, 193], [253, 155, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #369699, #79B8B6, #AFCCA8, #F5F2C1, #FD9B6E 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: #369699; --color-2: #79b8b6; --color-3: #afcca8; --color-4: #f5f2c1; --color-5: #fd9b6e. 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