#38F5FF + #7EDFE7 + #ABCBCD + #BFBEB1 + #D1B87E · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#38F5FF

Sky Blue · Turquoise · Lake Green

HEX

#38F5FF

RGB

rgb(56, 245, 255)

HSL

hsl(183, 100%, 61%)

HSB

hsb(183, 78%, 100%)

CMYK

cmyk(78%, 4%, 0%, 0%)

Oklch

oklch(88.6% 0.142 200.5)

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

#7EDFE7

Sky Blue · SkyBlue · Lake Green

HEX

#7EDFE7

RGB

rgb(126, 223, 231)

HSL

hsl(185, 69%, 70%)

HSB

hsb(185, 45%, 91%)

CMYK

cmyk(45%, 3%, 0%, 9%)

Oklch

oklch(84.7% 0.092 202.5)

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

#ABCBCD

Sky Blue · LightSteelBlue · Lake Green

HEX

#ABCBCD

RGB

rgb(171, 203, 205)

HSL

hsl(184, 25%, 74%)

HSB

hsb(184, 17%, 80%)

CMYK

cmyk(17%, 1%, 0%, 20%)

Oklch

oklch(81.9% 0.034 201.2)

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

#BFBEB1

Fresh Green · Silver · Sunflower

HEX

#BFBEB1

RGB

rgb(191, 190, 177)

HSL

hsl(56, 10%, 72%)

HSB

hsb(56, 7%, 75%)

CMYK

cmyk(0%, 1%, 7%, 25%)

Oklch

oklch(79.9% 0.018 103.2)

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

#D1B87E

Ginger · Tan · Sunflower

HEX

#D1B87E

RGB

rgb(209, 184, 126)

HSL

hsl(42, 47%, 66%)

HSB

hsb(42, 40%, 82%)

CMYK

cmyk(0%, 12%, 40%, 18%)

Oklch

oklch(79.1% 0.081 87.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

38F5FF

FF4238

Analogous

38FFA5

38F5FF

3892FF

Triadic

38F5FF

FF38F5

F5FF38

Split-Comp.

38F5FF

FF3892

FFA538

Tetradic

38F5FF

A538FF

FF4238

92FF38

Contrast Matrix WCAG 2.1 Contrast

38F5FF	7EDFE7	ABCBCD	BFBEB1	D1B87E
—	1.2 Fail	1.3 Fail	1.4 Fail	1.4 Fail
1.2 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.0 Fail
1.4 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

1.3Fail

1.5Fail

1.7Fail

1.9Fail

Black BG

15.7AAA

13.6AAA

12.2AAA

11.2AAA

10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8CFD

A8A9E5

B9B9CD

BFBFB4

C6C68C

Deuteranopia

7F71FC

A29BE5

B7B5CC

BFBFB5

C8C98F

Tritanopia

41FBFA

83E4E3

ADCCCC

BFB7B7

D0979A

Achromatopsia

BEBEBE

C3C3C3

C2C2C2

BDBDBD

B9B9B9

Shades & Tints Shades & Tints

#38F5FF

Dark

Light

#7EDFE7

Dark

Light

#ABCBCD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #38f5ff;
  --color-2: #7edfe7;
  --color-3: #abcbcd;
  --color-4: #bfbeb1;
  --color-5: #d1b87e;
}

SCSS

$color-1: #38f5ff;
$color-2: #7edfe7;
$color-3: #abcbcd;
$color-4: #bfbeb1;
$color-5: #d1b87e;

TAILWIND

colors: {
  'brand-1': '#38f5ff',
  'brand-2': '#7edfe7',
  'brand-3': '#abcbcd',
  'brand-4': '#bfbeb1',
  'brand-5': '#d1b87e',
}

RGB Array

[56, 245, 255], [126, 223, 231], [171, 203, 205], [191, 190, 177], [209, 184, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #38F5FF, #7EDFE7, #ABCBCD, #BFBEB1, #D1B87E 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: #38f5ff; --color-2: #7edfe7; --color-3: #abcbcd; --color-4: #bfbeb1; --color-5: #d1b87e. 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 earth-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