← Back to Editor

#7698A0 · #A9BEC2 · #F3F7F8 · #CCC6A4 · #7C7446

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

#7698A0

Slate Blue · LightSlateGray · Lake Green

HEX
#7698A0
RGB
rgb(118, 152, 160)
HSL
hsl(191, 18%, 55%)
HSB
hsb(191, 26%, 63%)
CMYK
cmyk(26%, 5%, 0%, 37%)
Oklch
oklch(65.7% 0.039 213.7)

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

#A9BEC2

Sky Blue · Silver · Lake Green

HEX
#A9BEC2
RGB
rgb(169, 190, 194)
HSL
hsl(190, 17%, 71%)
HSB
hsb(190, 13%, 76%)
CMYK
cmyk(13%, 2%, 0%, 24%)
Oklch
oklch(78.7% 0.024 210.4)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#F3F7F8

Sky Blue · Snow · Glacier Blue

HEX
#F3F7F8
RGB
rgb(243, 247, 248)
HSL
hsl(192, 26%, 96%)
HSB
hsb(192, 2%, 97%)
CMYK
cmyk(2%, 0%, 0%, 3%)
Oklch
oklch(97.3% 0.004 214.3)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#CCC6A4

Fresh Green · Tan · Sunflower

HEX
#CCC6A4
RGB
rgb(204, 198, 164)
HSL
hsl(51, 28%, 72%)
HSB
hsb(51, 20%, 80%)
CMYK
cmyk(0%, 3%, 20%, 20%)
Oklch
oklch(82.3% 0.046 99.0)

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

#7C7446

Autumn Sage · DimGray · Honey Gold

HEX
#7C7446
RGB
rgb(124, 116, 70)
HSL
hsl(51, 28%, 38%)
HSB
hsb(51, 44%, 49%)
CMYK
cmyk(0%, 6%, 44%, 51%)
Oklch
oklch(55.5% 0.065 99.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7698A0
A17F78

Analogous

78A194
7698A0
7885A1

Triadic

7698A0
A17899
99A178

Split-Comp.

7698A0
A17885
A19478

Tetradic

7698A0
9478A1
A17F78
85A178

Contrast Matrix WCAG 2.1 Contrast

7698A0
A9BEC2
F3F7F8
CCC6A4
7C7446
—
1.6
Fail
2.9
Fail
1.8
Fail
1.5
Fail
1.6
Fail
—
1.8
Fail
1.1
Fail
2.4
Fail
2.9
Fail
1.8
Fail
—
1.6
Fail
4.4
AA Large
1.8
Fail
1.1
Fail
1.6
Fail
—
2.7
Fail
1.5
Fail
2.4
Fail
4.4
AA Large
2.7
Fail
—
White BG
3.1AA Large
1.9Fail
1.1Fail
1.7Fail
4.7AA
Black BG
6.8AA
10.8AAA
19.5AAA
12.2AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

85859E
B2B2C1
F5F5F8
C9C9AC
797851

Deuteranopia

83809E
B1AFC1
F5F4F8
CACAAE
797A54

Tritanopia

789D9C
AAC0C0
F3F8F8
CCB3B4
7C5A5C

Achromatopsia

8F8F8F
B8B8B8
F6F6F6
C4C4C4
717171

Shades & Tints Shades & Tints

#7698A0

Dark
Light

#A9BEC2

Dark
Light

#F3F7F8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7698a0;
  --color-2: #a9bec2;
  --color-3: #f3f7f8;
  --color-4: #ccc6a4;
  --color-5: #7c7446;
}

SCSS

$color-1: #7698a0;
$color-2: #a9bec2;
$color-3: #f3f7f8;
$color-4: #ccc6a4;
$color-5: #7c7446;

TAILWIND

colors: {
  'brand-1': '#7698a0',
  'brand-2': '#a9bec2',
  'brand-3': '#f3f7f8',
  'brand-4': '#ccc6a4',
  'brand-5': '#7c7446',
}

RGB Array

[118, 152, 160], [169, 190, 194], [243, 247, 248], [204, 198, 164], [124, 116, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7698A0, #A9BEC2, #F3F7F8, #CCC6A4, #7C7446 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #7698a0; --color-2: #a9bec2; --color-3: #f3f7f8; --color-4: #ccc6a4; --color-5: #7c7446. 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 beauty, lifestyle, arts 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