#6DAFAF + #F8DE78 + #FBEFC1 + #D3A7CA + #A86B4C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#6DAFAF

Slate Blue · CadetBlue · Lake Green

HEX

#6DAFAF

RGB

rgb(109, 175, 175)

HSL

hsl(180, 29%, 56%)

HSB

hsb(180, 38%, 69%)

CMYK

cmyk(38%, 0%, 0%, 31%)

Oklch

oklch(71.0% 0.067 195.7)

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

#F8DE78

Goose Yellow · Khaki · Sunflower

HEX

#F8DE78

RGB

rgb(248, 222, 120)

HSL

hsl(48, 90%, 72%)

HSB

hsb(48, 52%, 97%)

CMYK

cmyk(0%, 10%, 52%, 3%)

Oklch

oklch(90.1% 0.126 95.4)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#FBEFC1

Goose Yellow · Bisque · Lemon Cream

HEX

#FBEFC1

RGB

rgb(251, 239, 193)

HSL

hsl(48, 88%, 87%)

HSB

hsb(48, 23%, 98%)

CMYK

cmyk(0%, 5%, 23%, 2%)

Oklch

oklch(95.0% 0.061 95.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D3A7CA

Mauve · Silver · Lilac Purple

HEX

#D3A7CA

RGB

rgb(211, 167, 202)

HSL

hsl(312, 33%, 74%)

HSB

hsb(312, 21%, 83%)

CMYK

cmyk(0%, 21%, 4%, 17%)

Oklch

oklch(77.9% 0.069 333.4)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#A86B4C

Tangerine · Sienna · Amber Brown

HEX

#A86B4C

RGB

rgb(168, 107, 76)

HSL

hsl(20, 38%, 48%)

HSB

hsb(20, 55%, 66%)

CMYK

cmyk(0%, 36%, 55%, 34%)

Oklch

oklch(58.6% 0.090 47.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6DAFAF

AF6E6E

Analogous

6EAF8F

6DAFAF

6E8FAF

Triadic

6DAFAF

AF6EAF

AFAF6E

Split-Comp.

6DAFAF

AF6E8F

AF8F6E

Tetradic

6DAFAF

8F6EAF

AF6E6E

8FAF6E

Contrast Matrix WCAG 2.1 Contrast

6DAFAF	F8DE78	FBEFC1	D3A7CA	A86B4C
—	1.9 Fail	2.2 Fail	1.2 Fail	1.7 Fail
1.9 Fail	—	1.2 Fail	1.5 Fail	3.2 AA Large
2.2 Fail	1.2 Fail	—	1.8 Fail	3.7 AA Large
1.2 Fail	1.5 Fail	1.8 Fail	—	2.1 Fail
1.7 Fail	3.2 AA Large	3.7 AA Large	2.1 Fail	—

White BG

2.5Fail

1.3Fail

1.2Fail

2.1Fail

4.3AA Large

Black BG

8.4AAA

15.7AAA

18.2AAA

10.2AAA

4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8AAF

EDED91

F6F6CC

C0C0C2

8E8D54

Deuteranopia

8681AF

EEF097

F7F7CF

C3C6BF

919655

Tritanopia

70AFAF

F7A4A8

FAD5D7

D1BBB9

A5595B

Achromatopsia

9B9B9B

DADADA

EDEDED

B8B8B8

7A7A7A

Shades & Tints Shades & Tints

#6DAFAF

Dark

Light

#F8DE78

Dark

Light

#FBEFC1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6dafaf;
  --color-2: #f8de78;
  --color-3: #fbefc1;
  --color-4: #d3a7ca;
  --color-5: #a86b4c;
}

SCSS

$color-1: #6dafaf;
$color-2: #f8de78;
$color-3: #fbefc1;
$color-4: #d3a7ca;
$color-5: #a86b4c;

TAILWIND

colors: {
  'brand-1': '#6dafaf',
  'brand-2': '#f8de78',
  'brand-3': '#fbefc1',
  'brand-4': '#d3a7ca',
  'brand-5': '#a86b4c',
}

RGB Array

[109, 175, 175], [248, 222, 120], [251, 239, 193], [211, 167, 202], [168, 107, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6DAFAF, #F8DE78, #FBEFC1, #D3A7CA, #A86B4C is ideal for: health products, baby brands, fresh-style blogs. 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: #6dafaf; --color-2: #f8de78; --color-3: #fbefc1; --color-4: #d3a7ca; --color-5: #a86b4c. 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 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