← Back to Editor

#699193 · #1B282E · #99B3AA · #F2E4DC · #E8CEC8

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

#699193

Slate Blue · LightSlateGray · Mint Ice

HEX
#699193
RGB
rgb(105, 145, 147)
HSL
hsl(183, 17%, 49%)
HSB
hsb(183, 29%, 58%)
CMYK
cmyk(29%, 1%, 0%, 42%)
Oklch
oklch(62.8% 0.044 200.0)

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

#1B282E

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1B282E
RGB
rgb(27, 40, 46)
HSL
hsl(199, 26%, 14%)
HSB
hsb(199, 41%, 18%)
CMYK
cmyk(41%, 13%, 0%, 82%)
Oklch
oklch(26.8% 0.021 228.1)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#99B3AA

Jade · DarkGray · Apple Green

HEX
#99B3AA
RGB
rgb(153, 179, 170)
HSL
hsl(159, 15%, 65%)
HSB
hsb(159, 15%, 70%)
CMYK
cmyk(15%, 0%, 5%, 30%)
Oklch
oklch(74.4% 0.031 172.5)

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

#F2E4DC

Apricot · Beige · Peach Orange

HEX
#F2E4DC
RGB
rgb(242, 228, 220)
HSL
hsl(22, 46%, 91%)
HSB
hsb(22, 9%, 95%)
CMYK
cmyk(0%, 6%, 9%, 5%)
Oklch
oklch(92.8% 0.019 52.0)

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

#E8CEC8

Peach Pink · LightGray · Cherry Blossom

HEX
#E8CEC8
RGB
rgb(232, 206, 200)
HSL
hsl(11, 41%, 85%)
HSB
hsb(11, 14%, 91%)
CMYK
cmyk(0%, 11%, 14%, 9%)
Oklch
oklch(87.1% 0.030 33.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

699193
926A68

Analogous

68927F
699193
687B92

Triadic

699193
926890
909268

Split-Comp.

699193
92687B
927F68

Tetradic

699193
7F6892
926A68
7B9268

Contrast Matrix WCAG 2.1 Contrast

699193
1B282E
99B3AA
F2E4DC
E8CEC8
—
4.4
AA Large
1.5
Fail
2.8
Fail
2.3
Fail
4.4
AA Large
—
6.8
AA
12.2
AAA
10.1
AAA
1.5
Fail
6.8
AA
—
1.8
Fail
1.5
Fail
2.8
Fail
12.2
AAA
1.8
Fail
—
1.2
Fail
2.3
Fail
10.1
AAA
1.5
Fail
1.2
Fail
—
White BG
3.5AA Large
15.1AAA
2.2Fail
1.2Fail
1.5Fail
Black BG
6.1AA
1.4Fail
9.4AAA
16.9AAA
14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7B93
21212D
A4A4AC
ECECDE
DDDDC9

Deuteranopia

787592
201F2C
A3A1AD
EDEEDE
DEE0CA

Tritanopia

6B9292
1C2B2B
9AAEAE
F1DFE0
E7CBCB

Achromatopsia

858585
252525
AAAAAA
E7E7E7
D5D5D5

Shades & Tints Shades & Tints

#699193

Dark
Light

#1B282E

Dark
Light

#99B3AA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #699193;
  --color-2: #1b282e;
  --color-3: #99b3aa;
  --color-4: #f2e4dc;
  --color-5: #e8cec8;
}

SCSS

$color-1: #699193;
$color-2: #1b282e;
$color-3: #99b3aa;
$color-4: #f2e4dc;
$color-5: #e8cec8;

TAILWIND

colors: {
  'brand-1': '#699193',
  'brand-2': '#1b282e',
  'brand-3': '#99b3aa',
  'brand-4': '#f2e4dc',
  'brand-5': '#e8cec8',
}

RGB Array

[105, 145, 147], [27, 40, 46], [153, 179, 170], [242, 228, 220], [232, 206, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #699193, #1B282E, #99B3AA, #F2E4DC, #E8CEC8 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #699193; --color-2: #1b282e; --color-3: #99b3aa; --color-4: #f2e4dc; --color-5: #e8cec8. 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. Restrained colors convey professionalism and trust. 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