← Back to Editor

#697E92 · #A6A29D · #CFB5A8 · #F7C8B2 · #FFF4EB

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#697E92

Slate Blue · SlateGray · Navy Blue

HEX
#697E92
RGB
rgb(105, 126, 146)
HSL
hsl(209, 16%, 49%)
HSB
hsb(209, 28%, 57%)
CMYK
cmyk(28%, 14%, 0%, 43%)
Oklch
oklch(58.4% 0.039 247.2)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#A6A29D

Ash · DarkGray · Silver Sand

HEX
#A6A29D
RGB
rgb(166, 162, 157)
HSL
hsl(33, 5%, 63%)
HSB
hsb(33, 5%, 65%)
CMYK
cmyk(0%, 2%, 5%, 35%)
Oklch
oklch(71.4% 0.009 73.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#CFB5A8

Apricot · Tan · Warm Sun

HEX
#CFB5A8
RGB
rgb(207, 181, 168)
HSL
hsl(20, 29%, 74%)
HSB
hsb(20, 19%, 81%)
CMYK
cmyk(0%, 13%, 19%, 19%)
Oklch
oklch(79.2% 0.035 48.3)

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

#F7C8B2

Apricot · Wheat · Peach Orange

HEX
#F7C8B2
RGB
rgb(247, 200, 178)
HSL
hsl(19, 81%, 83%)
HSB
hsb(19, 28%, 97%)
CMYK
cmyk(0%, 19%, 28%, 3%)
Oklch
oklch(86.8% 0.062 46.4)

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

#FFF4EB

Apricot · SeaShell · Peach Orange

HEX
#FFF4EB
RGB
rgb(255, 244, 235)
HSL
hsl(27, 100%, 96%)
HSB
hsb(27, 8%, 100%)
CMYK
cmyk(0%, 4%, 8%, 0%)
Oklch
oklch(97.3% 0.017 62.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

697E92
917C69

Analogous

699190
697E92
696A91

Triadic

697E92
91697E
7E9169

Split-Comp.

697E92
91696A
919069

Tetradic

697E92
906991
917C69
6A9169

Contrast Matrix WCAG 2.1 Contrast

697E92
A6A29D
CFB5A8
F7C8B2
FFF4EB
—
1.7
Fail
2.2
Fail
2.8
Fail
3.9
AA Large
1.7
Fail
—
1.3
Fail
1.7
Fail
2.3
Fail
2.2
Fail
1.3
Fail
—
1.3
Fail
1.8
Fail
2.8
Fail
1.7
Fail
1.3
Fail
—
1.4
Fail
3.9
AA Large
2.3
Fail
1.8
Fail
1.4
Fail
—
White BG
4.2AA Large
2.5Fail
1.9Fail
1.5Fail
1.1Fail
Black BG
5.0AA
8.3AAA
10.8AAA
13.9AAA
19.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

72728D
A4A49E
C4C4AB
E3E2B7
FAFAED

Deuteranopia

716F8C
A5A59F
C5C7AC
E5E9B9
FBFCEE

Tritanopia

6A8989
A69F9F
CEAEAE
F5BCBC
FEEFEF

Achromatopsia

7A7A7A
A3A3A3
BBBBBB
D4D4D4
F6F6F6

Shades & Tints Shades & Tints

#697E92

Dark
Light

#A6A29D

Dark
Light

#CFB5A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #697e92;
  --color-2: #a6a29d;
  --color-3: #cfb5a8;
  --color-4: #f7c8b2;
  --color-5: #fff4eb;
}

SCSS

$color-1: #697e92;
$color-2: #a6a29d;
$color-3: #cfb5a8;
$color-4: #f7c8b2;
$color-5: #fff4eb;

TAILWIND

colors: {
  'brand-1': '#697e92',
  'brand-2': '#a6a29d',
  'brand-3': '#cfb5a8',
  'brand-4': '#f7c8b2',
  'brand-5': '#fff4eb',
}

RGB Array

[105, 126, 146], [166, 162, 157], [207, 181, 168], [247, 200, 178], [255, 244, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #697E92, #A6A29D, #CFB5A8, #F7C8B2, #FFF4EB 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: #697e92; --color-2: #a6a29d; --color-3: #cfb5a8; --color-4: #f7c8b2; --color-5: #fff4eb. 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 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