← Back to Editor

#BFE5EE · #B6CACB · #A4A579 · #E87F00 · #FF6E1A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BFE5EE

Sky Blue · LightBlue · Glacier Blue

HEX
#BFE5EE
RGB
rgb(191, 229, 238)
HSL
hsl(191, 58%, 84%)
HSB
hsb(191, 20%, 93%)
CMYK
cmyk(20%, 4%, 0%, 7%)
Oklch
oklch(89.8% 0.042 213.7)

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

#B6CACB

Sky Blue · Silver · Lake Green

HEX
#B6CACB
RGB
rgb(182, 202, 203)
HSL
hsl(183, 17%, 75%)
HSB
hsb(183, 10%, 80%)
CMYK
cmyk(10%, 0%, 0%, 20%)
Oklch
oklch(82.4% 0.022 200.4)

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

#A4A579

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A4A579
RGB
rgb(164, 165, 121)
HSL
hsl(61, 20%, 56%)
HSB
hsb(61, 27%, 65%)
CMYK
cmyk(1%, 0%, 27%, 35%)
Oklch
oklch(71.0% 0.061 108.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#E87F00

Ochre · Chocolate · Amber Brown

HEX
#E87F00
RGB
rgb(232, 127, 0)
HSL
hsl(33, 100%, 45%)
HSB
hsb(33, 100%, 91%)
CMYK
cmyk(0%, 45%, 100%, 9%)
Oklch
oklch(69.9% 0.167 58.4)

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

#FF6E1A

Tangerine · Chocolate · Warm Sun

HEX
#FF6E1A
RGB
rgb(255, 110, 26)
HSL
hsl(22, 100%, 55%)
HSB
hsb(22, 90%, 100%)
CMYK
cmyk(0%, 57%, 90%, 0%)
Oklch
oklch(70.7% 0.196 44.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFE5EE
EEC7BF

Analogous

BFEEDF
BFE5EE
BFCEEE

Triadic

BFE5EE
EEBFE5
E5EEBF

Split-Comp.

BFE5EE
EEBFCE
EEDFBF

Tetradic

BFE5EE
DFBFEE
EEC7BF
CEEEBF

Contrast Matrix WCAG 2.1 Contrast

BFE5EE
B6CACB
A4A579
E87F00
FF6E1A
—
1.3
Fail
1.9
Fail
2.1
Fail
2.1
Fail
1.3
Fail
—
1.5
Fail
1.6
Fail
1.6
Fail
1.9
Fail
1.5
Fail
—
1.1
Fail
1.1
Fail
2.1
Fail
1.6
Fail
1.1
Fail
—
1.0
Fail
2.1
Fail
1.6
Fail
1.1
Fail
1.0
Fail
—
White BG
1.3Fail
1.7Fail
2.5Fail
2.8Fail
2.8Fail
Black BG
15.7AAA
12.3AAA
8.2AAA
7.5AAA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFD0EC
BFBFCB
A4A484
BBBA1F
C0BF2E

Deuteranopia

CDCAEB
BEBCCB
A4A486
C1C826
C9D433

Tritanopia

C1EAEA
B7CBCB
A48C8E
E3373C
F83E42

Achromatopsia

DBDBDB
C4C4C4
A0A0A0
909090
909090

Shades & Tints Shades & Tints

#BFE5EE

Dark
Light

#B6CACB

Dark
Light

#A4A579

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfe5ee;
  --color-2: #b6cacb;
  --color-3: #a4a579;
  --color-4: #e87f00;
  --color-5: #ff6e1a;
}

SCSS

$color-1: #bfe5ee;
$color-2: #b6cacb;
$color-3: #a4a579;
$color-4: #e87f00;
$color-5: #ff6e1a;

TAILWIND

colors: {
  'brand-1': '#bfe5ee',
  'brand-2': '#b6cacb',
  'brand-3': '#a4a579',
  'brand-4': '#e87f00',
  'brand-5': '#ff6e1a',
}

RGB Array

[191, 229, 238], [182, 202, 203], [164, 165, 121], [232, 127, 0], [255, 110, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFE5EE, #B6CACB, #A4A579, #E87F00, #FF6E1A 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: #bfe5ee; --color-2: #b6cacb; --color-3: #a4a579; --color-4: #e87f00; --color-5: #ff6e1a. 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