#BA4037 + #D46516 + #DAE1BF + #BFDCE0 + #AFC8C9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BA4037

Crimson · Brown · Passion Red

HEX

#BA4037

RGB

rgb(186, 64, 55)

HSL

hsl(4, 54%, 47%)

HSB

hsb(4, 70%, 73%)

CMYK

cmyk(0%, 66%, 70%, 27%)

Oklch

oklch(54.3% 0.159 27.8)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#D46516

Tangerine · Chocolate · Amber Brown

HEX

#D46516

RGB

rgb(212, 101, 22)

HSL

hsl(25, 81%, 46%)

HSB

hsb(25, 90%, 83%)

CMYK

cmyk(0%, 52%, 90%, 17%)

Oklch

oklch(63.1% 0.161 49.0)

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

#DAE1BF

Willow Green · LightGray · Mint Green

HEX

#DAE1BF

RGB

rgb(218, 225, 191)

HSL

hsl(72, 36%, 82%)

HSB

hsb(72, 15%, 88%)

CMYK

cmyk(3%, 0%, 15%, 12%)

Oklch

oklch(89.5% 0.046 116.8)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#BFDCE0

Sky Blue · LightBlue · Glacier Blue

HEX

#BFDCE0

RGB

rgb(191, 220, 224)

HSL

hsl(187, 35%, 81%)

HSB

hsb(187, 15%, 88%)

CMYK

cmyk(15%, 2%, 0%, 12%)

Oklch

oklch(87.4% 0.031 206.7)

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

#AFC8C9

Sky Blue · Silver · Lake Green

HEX

#AFC8C9

RGB

rgb(175, 200, 201)

HSL

hsl(182, 19%, 74%)

HSB

hsb(182, 13%, 79%)

CMYK

cmyk(13%, 0%, 0%, 21%)

Oklch

oklch(81.4% 0.027 199.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BA4037

37B0B9

Analogous

B9376F

BA4037

B98037

Triadic

BA4037

37B940

4037B9

Split-Comp.

BA4037

37B980

376FB9

Tetradic

BA4037

6FB937

37B0B9

8037B9

Contrast Matrix WCAG 2.1 Contrast

BA4037	D46516	DAE1BF	BFDCE0	AFC8C9
—	1.5 Fail	4.0 AA Large	3.7 AA Large	3.1 AA Large
1.5 Fail	—	2.7 Fail	2.6 Fail	2.1 Fail
4.0 AA Large	2.7 Fail	—	1.1 Fail	1.3 Fail
3.7 AA Large	2.6 Fail	1.1 Fail	—	1.2 Fail
3.1 AA Large	2.1 Fail	1.3 Fail	1.2 Fail	—

White BG

5.4AA

3.7AA Large

1.4Fail

1.8Fail

Black BG

3.9AA Large

5.7AA

15.5AAA

14.5AAA

11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

858439

A4A329

DDDDC7

CCCCDF

BABAC9

Deuteranopia

8C953A

AAB32E

DDDCC9

CAC8DF

B8B7C9

Tritanopia

B43B3B

CE383C

DACECF

C0DEDE

B0C9C9

Achromatopsia

636363

7D7D7D

DBDBDB

D4D4D4

C1C1C1

Shades & Tints Shades & Tints

#BA4037

Dark

Light

#D46516

Dark

Light

#DAE1BF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ba4037;
  --color-2: #d46516;
  --color-3: #dae1bf;
  --color-4: #bfdce0;
  --color-5: #afc8c9;
}

SCSS

$color-1: #ba4037;
$color-2: #d46516;
$color-3: #dae1bf;
$color-4: #bfdce0;
$color-5: #afc8c9;

TAILWIND

colors: {
  'brand-1': '#ba4037',
  'brand-2': '#d46516',
  'brand-3': '#dae1bf',
  'brand-4': '#bfdce0',
  'brand-5': '#afc8c9',
}

RGB Array

[186, 64, 55], [212, 101, 22], [218, 225, 191], [191, 220, 224], [175, 200, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BA4037, #D46516, #DAE1BF, #BFDCE0, #AFC8C9 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: #ba4037; --color-2: #d46516; --color-3: #dae1bf; --color-4: #bfdce0; --color-5: #afc8c9. 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