← Back to Editor

#F6F7F1 · #BEEAC6 · #61CBB5 · #07A0A6 · #20153D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F6F7F1

Willow Green · SeaShell · Mint Green

HEX
#F6F7F1
RGB
rgb(246, 247, 241)
HSL
hsl(70, 27%, 96%)
HSB
hsb(70, 2%, 97%)
CMYK
cmyk(0%, 0%, 2%, 3%)
Oklch
oklch(97.4% 0.008 114.2)

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

#BEEAC6

Emerald · LightGray · Mint Green

HEX
#BEEAC6
RGB
rgb(190, 234, 198)
HSL
hsl(131, 51%, 83%)
HSB
hsb(131, 19%, 92%)
CMYK
cmyk(19%, 0%, 15%, 8%)
Oklch
oklch(89.6% 0.067 150.2)

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

#61CBB5

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#61CBB5
RGB
rgb(97, 203, 181)
HSL
hsl(168, 50%, 59%)
HSB
hsb(168, 52%, 80%)
CMYK
cmyk(52%, 0%, 11%, 20%)
Oklch
oklch(77.3% 0.104 177.9)

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

#07A0A6

Lake Blue · LightSeaGreen · Mint Ice

HEX
#07A0A6
RGB
rgb(7, 160, 166)
HSL
hsl(182, 92%, 34%)
HSB
hsb(182, 96%, 65%)
CMYK
cmyk(96%, 4%, 0%, 35%)
Oklch
oklch(64.2% 0.108 199.6)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#20153D

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#20153D
RGB
rgb(32, 21, 61)
HSL
hsl(257, 49%, 16%)
HSB
hsb(257, 66%, 24%)
CMYK
cmyk(48%, 66%, 0%, 76%)
Oklch
oklch(23.5% 0.074 292.5)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6F7F1
F3F2F8

Analogous

F8F6F2
F6F7F1
F4F8F2

Triadic

F6F7F1
F2F7F8
F8F2F7

Split-Comp.

F6F7F1
F2F4F8
F6F2F8

Tetradic

F6F7F1
F2F8F6
F3F2F8
F8F2F4

Contrast Matrix WCAG 2.1 Contrast

F6F7F1
BEEAC6
61CBB5
07A0A6
20153D
—
1.2
Fail
1.8
Fail
3.0
Fail
15.8
AAA
1.2
Fail
—
1.5
Fail
2.4
Fail
12.8
AAA
1.8
Fail
1.5
Fail
—
1.6
Fail
8.7
AAA
3.0
Fail
2.4
Fail
1.6
Fail
—
5.3
AA
15.8
AAA
12.8
AAA
8.7
AAA
5.3
AA
—
White BG
1.1Fail
1.3Fail
2.0Fail
3.2AA Large
17.0AAA
Black BG
19.5AAA
15.8AAA
10.7AAA
6.6AA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6F2
D1D1CF
8F90BA
494BA5
1B1B33

Deuteranopia

F6F6F3
CFCBD1
8981BC
4035A4
1C1D31

Tritanopia

F6F4F4
C0D6D7
66BFBF
0FA3A3
1F2C2A

Achromatopsia

F6F6F6
D9D9D9
A9A9A9
737373
1D1D1D

Shades & Tints Shades & Tints

#F6F7F1

Dark
Light

#BEEAC6

Dark
Light

#61CBB5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6f7f1;
  --color-2: #beeac6;
  --color-3: #61cbb5;
  --color-4: #07a0a6;
  --color-5: #20153d;
}

SCSS

$color-1: #f6f7f1;
$color-2: #beeac6;
$color-3: #61cbb5;
$color-4: #07a0a6;
$color-5: #20153d;

TAILWIND

colors: {
  'brand-1': '#f6f7f1',
  'brand-2': '#beeac6',
  'brand-3': '#61cbb5',
  'brand-4': '#07a0a6',
  'brand-5': '#20153d',
}

RGB Array

[246, 247, 241], [190, 234, 198], [97, 203, 181], [7, 160, 166], [32, 21, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6F7F1, #BEEAC6, #61CBB5, #07A0A6, #20153D is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f6f7f1; --color-2: #beeac6; --color-3: #61cbb5; --color-4: #07a0a6; --color-5: #20153d. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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