#7A7D78 + #F28933 + #66D9CC + #C8D9BD + #EBEABC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7A7D78

Ink Gray · Gray · Warm Gray

HEX

#7A7D78

RGB

rgb(122, 125, 120)

HSL

hsl(96, 2%, 48%)

HSB

hsb(96, 4%, 49%)

CMYK

cmyk(2%, 0%, 4%, 51%)

Oklch

oklch(58.6% 0.008 132.5)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#F28933

Tangerine · Coral · Warm Sun

HEX

#F28933

RGB

rgb(242, 137, 51)

HSL

hsl(27, 88%, 57%)

HSB

hsb(27, 79%, 95%)

CMYK

cmyk(0%, 43%, 79%, 5%)

Oklch

oklch(73.1% 0.159 55.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#66D9CC

Jade · MediumTurquoise · Lake Green

HEX

#66D9CC

RGB

rgb(102, 217, 204)

HSL

hsl(173, 60%, 63%)

HSB

hsb(173, 53%, 85%)

CMYK

cmyk(53%, 0%, 6%, 15%)

Oklch

oklch(81.5% 0.107 185.5)

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

#C8D9BD

Celadon · LightGray · Apple Green

HEX

#C8D9BD

RGB

rgb(200, 217, 189)

HSL

hsl(96, 27%, 80%)

HSB

hsb(96, 13%, 85%)

CMYK

cmyk(8%, 0%, 13%, 15%)

Oklch

oklch(86.5% 0.042 133.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#EBEABC

Fresh Green · Wheat · Lemon Cream

HEX

#EBEABC

RGB

rgb(235, 234, 188)

HSL

hsl(59, 54%, 83%)

HSB

hsb(59, 20%, 92%)

CMYK

cmyk(0%, 0%, 20%, 8%)

Oklch

oklch(92.6% 0.060 106.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7A7D78

7B787D

Analogous

7C7D78

7A7D78

787D78

Triadic

7A7D78

787A7D

7D787A

Split-Comp.

7A7D78

78787D

7D787C

Tetradic

7A7D78

787C7D

7B787D

7D7878

Contrast Matrix WCAG 2.1 Contrast

7A7D78	F28933	66D9CC	C8D9BD	EBEABC
—	1.7 Fail	2.5 Fail	2.8 Fail	3.4 AA Large
1.7 Fail	—	1.5 Fail	1.7 Fail	2.0 Fail
2.5 Fail	1.5 Fail	—	1.1 Fail	1.4 Fail
2.8 Fail	1.7 Fail	1.1 Fail	—	1.2 Fail
3.4 AA Large	2.0 Fail	1.4 Fail	1.2 Fail	—

White BG

4.2AA Large

2.5Fail

1.7Fail

1.5Fail

1.2Fail

Black BG

5.0AA

8.4AAA

12.4AAA

14.1AAA

17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7B79

C5C448

9899CF

CFD0C4

EBEBC7

Deuteranopia

7B7B7A

CBD24D

9189D0

CECDC5

EBEBCA

Tritanopia

7A7A7A

ED585C

6CD2D2

C9C9CA

EBD0D2

Achromatopsia

7C7C7C

9F9F9F

B5B5B5

D1D1D1

E5E5E5

Shades & Tints Shades & Tints

#7A7D78

Dark

Light

#F28933

Dark

Light

#66D9CC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7a7d78;
  --color-2: #f28933;
  --color-3: #66d9cc;
  --color-4: #c8d9bd;
  --color-5: #ebeabc;
}

SCSS

$color-1: #7a7d78;
$color-2: #f28933;
$color-3: #66d9cc;
$color-4: #c8d9bd;
$color-5: #ebeabc;

TAILWIND

colors: {
  'brand-1': '#7a7d78',
  'brand-2': '#f28933',
  'brand-3': '#66d9cc',
  'brand-4': '#c8d9bd',
  'brand-5': '#ebeabc',
}

RGB Array

[122, 125, 120], [242, 137, 51], [102, 217, 204], [200, 217, 189], [235, 234, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7A7D78, #F28933, #66D9CC, #C8D9BD, #EBEABC 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: #7a7d78; --color-2: #f28933; --color-3: #66d9cc; --color-4: #c8d9bd; --color-5: #ebeabc. 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