Huehive Logo

HueHive

Tailwind Blue Palette

102 views
New Heights #D2E4EF
Sleepless Blue #C1E5FC
Metal Gear #A9C9DE
Blue Bell #8BB8D9
Serene Sea #76A8C2
Treasure Map Waters #5A8BA1
Harbour Blue #4B748C
Atlantis #3C5C6E
Nocturne #2E4852
Oceanic Noir #1B2A35
Midnight Edition #0D1721
#D2E4EF New Heights
#C1E5FC Sleepless Blue
#A9C9DE Metal Gear
#8BB8D9 Blue Bell
#76A8C2 Serene Sea
#5A8BA1 Treasure Map Waters
#4B748C Harbour Blue
#3C5C6E Atlantis
#2E4852 Nocturne
#1B2A35 Oceanic Noir
#0D1721 Midnight Edition

Tailwind Blue Palette

About This Color Palette

Here’s a visual representation of the Tailwind color palette based on your request, transitioning from the lightest to the darkest shades:

 <Tailwind Blue Palette>
1. Blue/50 - 
                            
                            #D2E4EF
                         - A very light blue, perfect for backgrounds and subtle accents.
2. Blue/100 - 
                            
                            #C1E5FC
                         - A light sky blue, great for hover states and light sections.
3. Blue/200 - 
                            
                            #A9C9DE
                         - A soft medium blue that can be used for borders and lighter text.
4. Blue/300 - 
                            
                            #8BB8D9
                         - A vibrant aqua blue, suitable for primary buttons and highlights.
5. Blue/400 - 
                            
                            #76A8C2
                         - A more pronounced blue, ideal for active states and larger areas.
6. Blue/500 - 
                            
                            #5A8BA1
                         - A strong blue that can serve as a primary brand color.
7. Blue/600 - 
                            
                            #4B748C
                         - A rich blue, good for secondary elements and deeper backgrounds.
8. Blue/700 - 
                            
                            #3C5C6E
                         - A darker blue that provides depth, usable for footers and heavy accents.
9. Blue/800 - 
                            
                            #2E4852
                         - A deep shade that can be used for text and high-contrast elements.
10. Blue/900 - 
                            
                            #1B2A35
                         - An ultra-dark blue, excellent for backgrounds and strong contrasts.
11. Blue/950 - 
                            
                            #0D1721
                         - The darkest shade in the palette, perfect for dark modes and dramatic effects.

These colors can be used in a Tailwind CSS project, providing a comprehensive range of blue tones that transition smoothly from light to dark.

Would you like any specific examples of how these colors can be applied in a design, or do you have another request?

C
Croma
Dashboard
Analytics
Customers
Settings
John Doe
Admin
Search...

Overview

Welcome back, here's what's happening today.

+12%
$45,231
Total Revenue
+12%
2,345
Active Users
+12%
128
New Orders

Revenue Growth

Brand
Features Pricing About

Build something amazing

Create stunning designs with our AI-powered color palette generator. Perfect for web, mobile, and print.

Fast Performance

Optimized for speed and efficiency.

Secure by Default

Enterprise-grade security built-in.

Easy to Use

Intuitive interface for everyone.

9:41

Good Morning

Here's your daily update

Today

Design Review
10:00 AM
Team Meeting
11:30 AM
Lunch Break
1:00 PM
Project Focus
2:00 PM
Home
Search
Profile
B
BrandName
Sponsored
...
New Collection

Summer
Sale

Get up to 50% off on all items.

1,234 likes
BrandName Don't miss out on our biggest sale of the season! #summersale #fashion

Logo Variations

B
BrandName
B
BrandName

Business Card

B
BrandName

John Doe

Creative Director

john.doe@brandname.com

+1 (555) 123-4567

www.brandname.com

Type Scale

Heading 1

Bold / 48px

Heading 2

Bold / 36px

Heading 3

Bold / 30px

Heading 4

Bold / 24px

Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Regular / 16px

Article Layout

Design Trends

The Future of Color

Color trends are evolving rapidly. We are seeing a shift towards more vibrant, expressive palettes that capture attention and evoke emotion.

"Color is a power which directly influences the soul."

Why it matters

Choosing the right color palette is crucial for brand identity. It communicates values without words and creates an instant connection with the audience.

Abstract

Composition #01

Download Files

PNG Image

Raster image format

Copy Code

variables.css

          

Simulate how your palette appears to users with different types of color vision deficiencies. Approximately 8% of men and 0.5% of women have some form of color blindness.

Original Palette

Protanopia

Red-blind (approx. 1% of men)

Deuteranopia

Green-blind (approx. 1% of men)

Tritanopia

Blue-blind (very rare)

Achromatopsia

Total color blindness (monochromacy)

Shades & Tints

Explore lighter variations (tints) and darker variations (shades) of each color. Click any color to copy its hex code.

New Heights

#D2E4EF

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Sleepless Blue

#C1E5FC

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Metal Gear

#A9C9DE

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Blue Bell

#8BB8D9

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Serene Sea

#76A8C2

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Treasure Map Waters

#5A8BA1

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Harbour Blue

#4B748C

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Atlantis

#3C5C6E

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Nocturne

#2E4852

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Oceanic Noir

#1B2A35

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Midnight Edition

#0D1721

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Color Wheel Distribution

Harmony Analysis

Dominant Temperature

--

Harmony Type

--

Analyzing color relationships...

Color Values (HSL)

Select Background

Select Text Color

Contrast Analysis

Aa

The quick brown fox jumps over the lazy dog.

Contrast Ratio --

Normal Text

WCAG AA --
WCAG AAA --

Large Text

WCAG AA --
WCAG AAA --

Understanding WCAG Scores

Normal Text

  • AA requires 4.5:1 ratio
  • AAA requires 7.0:1 ratio

Large Text (18pt+ or 14pt+ bold)

  • AA requires 3.0:1 ratio
  • AAA requires 4.5:1 ratio

What would you like to do?

Other Similar Palettes

#f2f2f2
#008080
#fff700
#b0c4de
#ff7f50
#333333
#3B82F6
#1D4ED8
#1E3A8A
#1E1A78
#F0F9FF
#E0F2FE
#90C8F7
#B2E0FB
#60A5FA
#2563EB
#1E40AF
#0075b1
#1a8ac2
#33a0d2
#4db7e2
#66cdee
#7fe4f9
#99e9ff
#b3f3ff
#ccfbff
#e6ffff
#003b76
#00539e
#0078c8
#0091db
#00a1e6
#00b2f0
#00c3ff
#00d4ff
#00e5ff
#00f6ff
#007BFF
#00A3E0
#33B5E5
#4B0082
#6A0DAD
#FF4500
#FF6347
#FFA500
#FFC107
#FFFFFF

Update Your Palette

Current Palette

New Heights
Sleepless Blue
Metal Gear
Blue Bell
Serene Sea
Treasure Map Waters
Harbour Blue
Atlantis
Nocturne
Oceanic Noir
Midnight Edition

Tailwind Blue Palette

Try these examples: