← Back to Editor

#AFC3BC · #A9ADB9 · #A2C3D2 · #B2D6D4 · #A3CCC8

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#AFC3BC

Jade · Silver · Apple Green

HEX
#AFC3BC
RGB
rgb(175, 195, 188)
HSL
hsl(159, 14%, 73%)
HSB
hsb(159, 10%, 76%)
CMYK
cmyk(10%, 0%, 4%, 24%)
Oklch
oklch(80.0% 0.024 172.7)

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

#A9ADB9

Azure · DarkGray · Cobalt Blue

HEX
#A9ADB9
RGB
rgb(169, 173, 185)
HSL
hsl(225, 10%, 69%)
HSB
hsb(225, 9%, 73%)
CMYK
cmyk(9%, 6%, 0%, 27%)
Oklch
oklch(74.8% 0.018 271.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#A2C3D2

Sky Blue · LightSteelBlue · Lake Green

HEX
#A2C3D2
RGB
rgb(162, 195, 210)
HSL
hsl(199, 35%, 73%)
HSB
hsb(199, 23%, 82%)
CMYK
cmyk(23%, 7%, 0%, 18%)
Oklch
oklch(79.8% 0.041 227.2)

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

#B2D6D4

Jade · LightBlue · Glacier Blue

HEX
#B2D6D4
RGB
rgb(178, 214, 212)
HSL
hsl(177, 31%, 77%)
HSB
hsb(177, 17%, 84%)
CMYK
cmyk(17%, 0%, 1%, 16%)
Oklch
oklch(85.0% 0.038 192.3)

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

#A3CCC8

Jade · LightSteelBlue · Lake Green

HEX
#A3CCC8
RGB
rgb(163, 204, 200)
HSL
hsl(174, 29%, 72%)
HSB
hsb(174, 20%, 80%)
CMYK
cmyk(20%, 0%, 2%, 20%)
Oklch
oklch(81.5% 0.044 189.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFC3BC
C4B1B7

Analogous

B1C4B3
AFC3BC
B1C1C4

Triadic

AFC3BC
BDB1C4
C4BDB1

Split-Comp.

AFC3BC
C4B1C1
C4B3B1

Tetradic

AFC3BC
B3B1C4
C4B1B7
C1C4B1

Contrast Matrix WCAG 2.1 Contrast

AFC3BC
A9ADB9
A2C3D2
B2D6D4
A3CCC8
—
1.2
Fail
1.0
Fail
1.2
Fail
1.1
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.3
Fail
1.0
Fail
1.2
Fail
—
1.2
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.1
Fail
—
White BG
1.8Fail
2.2Fail
1.9Fail
1.6Fail
1.7Fail
Black BG
11.4AAA
9.4AAA
11.3AAA
13.5AAA
12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B8BE
ABABB6
B0B1CE
C2C2D4
B5B5C9

Deuteranopia

B7B5BE
ABAAB5
AEACCE
C0BDD5
B2AFC9

Tritanopia

B0BFBF
A9B4B3
A4CCCB
B4D5D5
A5CACA

Achromatopsia

BCBCBC
ADADAD
BBBBBB
CBCBCB
BFBFBF

Shades & Tints Shades & Tints

#AFC3BC

Dark
Light

#A9ADB9

Dark
Light

#A2C3D2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afc3bc;
  --color-2: #a9adb9;
  --color-3: #a2c3d2;
  --color-4: #b2d6d4;
  --color-5: #a3ccc8;
}

SCSS

$color-1: #afc3bc;
$color-2: #a9adb9;
$color-3: #a2c3d2;
$color-4: #b2d6d4;
$color-5: #a3ccc8;

TAILWIND

colors: {
  'brand-1': '#afc3bc',
  'brand-2': '#a9adb9',
  'brand-3': '#a2c3d2',
  'brand-4': '#b2d6d4',
  'brand-5': '#a3ccc8',
}

RGB Array

[175, 195, 188], [169, 173, 185], [162, 195, 210], [178, 214, 212], [163, 204, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #AFC3BC, #A9ADB9, #A2C3D2, #B2D6D4, #A3CCC8 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #afc3bc; --color-2: #a9adb9; --color-3: #a2c3d2; --color-4: #b2d6d4; --color-5: #a3ccc8. 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. 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 nature-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