#ADD1DB + #DBAB8C + #8C6D5A + #FFF385 + #7A8052 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#ADD1DB

Sky Blue · LightBlue · Glacier Blue

HEX

#ADD1DB

RGB

rgb(173, 209, 219)

HSL

hsl(193, 39%, 77%)

HSB

hsb(193, 21%, 86%)

CMYK

cmyk(21%, 5%, 0%, 14%)

Oklch

oklch(83.8% 0.041 216.4)

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

#DBAB8C

Apricot · Tan · Warm Sun

HEX

#DBAB8C

RGB

rgb(219, 171, 140)

HSL

hsl(24, 52%, 70%)

HSB

hsb(24, 36%, 86%)

CMYK

cmyk(0%, 22%, 36%, 14%)

Oklch

oklch(77.7% 0.071 54.3)

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

#8C6D5A

Tangerine · DimGray · Amber Brown

HEX

#8C6D5A

RGB

rgb(140, 109, 90)

HSL

hsl(23, 22%, 45%)

HSB

hsb(23, 36%, 55%)

CMYK

cmyk(0%, 22%, 36%, 45%)

Oklch

oklch(56.0% 0.049 52.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#FFF385

Fresh Green · Khaki · Lemon Cream

HEX

#FFF385

RGB

rgb(255, 243, 133)

HSL

hsl(54, 100%, 76%)

HSB

hsb(54, 48%, 100%)

CMYK

cmyk(0%, 5%, 48%, 0%)

Oklch

oklch(95.1% 0.132 103.0)

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

#7A8052

Autumn Sage · DimGray · Honey Gold

HEX

#7A8052

RGB

rgb(122, 128, 82)

HSL

hsl(68, 22%, 41%)

HSB

hsb(68, 36%, 50%)

CMYK

cmyk(5%, 0%, 36%, 50%)

Oklch

oklch(58.3% 0.066 114.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADD1DB

DBB7AD

Analogous

ADDBCE

ADD1DB

ADBADB

Triadic

ADD1DB

DBADD1

D1DBAD

Split-Comp.

ADD1DB

DBADBA

DBCEAD

Tetradic

ADD1DB

CEADDB

DBB7AD

BADBAD

Contrast Matrix WCAG 2.1 Contrast

ADD1DB	DBAB8C	8C6D5A	FFF385	7A8052
—	1.3 Fail	2.9 Fail	1.4 Fail	2.6 Fail
1.3 Fail	—	2.3 Fail	1.8 Fail	2.0 Fail
2.9 Fail	2.3 Fail	—	4.1 AA Large	1.1 Fail
1.4 Fail	1.8 Fail	4.1 AA Large	—	3.7 AA Large
2.6 Fail	2.0 Fail	1.1 Fail	3.7 AA Large	—

White BG

1.6Fail

2.1Fail

4.7AA

1.1Fail

4.2AA Large

Black BG

12.9AAA

10.2AAA

4.5AA Large

18.4AAA

5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBDD9

C6C694

7F7E5F

FAFAA0

7D7D5D

Deuteranopia

BBB8D8

C9CD95

808360

FBFBA6

7C7C60

Tritanopia

AFD7D6

D9999B

8A6263

FEB5B9

7A6668

Achromatopsia

C7C7C7

B6B6B6

747474

EAEAEA

797979

Shades & Tints Shades & Tints

#ADD1DB

Dark

Light

#DBAB8C

Dark

Light

#8C6D5A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #add1db;
  --color-2: #dbab8c;
  --color-3: #8c6d5a;
  --color-4: #fff385;
  --color-5: #7a8052;
}

SCSS

$color-1: #add1db;
$color-2: #dbab8c;
$color-3: #8c6d5a;
$color-4: #fff385;
$color-5: #7a8052;

TAILWIND

colors: {
  'brand-1': '#add1db',
  'brand-2': '#dbab8c',
  'brand-3': '#8c6d5a',
  'brand-4': '#fff385',
  'brand-5': '#7a8052',
}

RGB Array

[173, 209, 219], [219, 171, 140], [140, 109, 90], [255, 243, 133], [122, 128, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ADD1DB, #DBAB8C, #8C6D5A, #FFF385, #7A8052 is ideal for: corporate websites, product showcases, portfolios. 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: #add1db; --color-2: #dbab8c; --color-3: #8c6d5a; --color-4: #fff385; --color-5: #7a8052. 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. 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