ColorPal

Tailwind CSS Brand Color

The official Tailwind CSS brand color is #06B6D4. Use this exact color code to maintain brand consistency across your designs, websites, and marketing materials.

Tailwind CSS Color Values

HEX

#06B6D4

RGB

6, 182, 212

HSL

189, 94%, 43%

Tailwind CSS Tints & Shades

A range of lighter tints and darker shades derived from the Tailwind CSS base color.

Tint 50%

#E6FBFE

Tint 40%

#B5F2FD

Tint 30%

#7EE8FB

Tint 20%

#4DE0F9

Tint 10%

#16D6F8

Base

#06B6D4

Shade 10%

#0698B2

Shade 20%

#047B8F

Shade 30%

#035D6D

Shade 40%

#023B45

Shade 50%

#011E23

Contrast & Accessibility

White Text

Contrast ratio: 2.43:1

AA: FailAAA: FailAA Large: FailAAA Large: Fail
Black Text

Contrast ratio: 8.65:1

AA: PassAAA: PassAA Large: PassAAA Large: Pass

Frequently Asked Questions

What is the official Tailwind CSS color?

The official Tailwind CSS brand color is #06B6D4. In RGB this is rgb(6, 182, 212), and in HSL it is hsl(189, 94%, 43%).

What is the Tailwind CSS hex code?

The Tailwind CSS hex color code is #06B6D4. You can use this value directly in CSS, design tools like Figma or Sketch, and any application that accepts hex color codes.

Is the Tailwind CSS color accessible?

Against white, the Tailwind CSS color has a contrast ratio of 2.43:1 (fails WCAG AA). Against black, it has 8.65:1 (passes WCAG AA). Black text on this color is accessible.

Related Resources