What is Arbitrary color values in Tailwind?

Tailwindmarkup~5 mins

Arbitrary color values in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Arbitrary color values let you use any color you want in Tailwind CSS, not just the preset ones. This helps you match exact colors for your design.

You want a specific brand color that Tailwind doesn't have.

You need a unique background color for a special section.

You want to try a custom text color that fits your style.

You are designing a button with a color from a design tool.

You want to quickly test a new color without changing Tailwind config.

Syntax

Tailwind

class="bg-[#123abc] text-[#f0e68c] border-solid border-[2px] border-[#ff6347]"

Use square brackets [ ] to wrap your custom color value.

You can use hex codes (#123abc), rgb(), rgba(), hsl(), or any valid CSS color inside the brackets.

Examples

This sets a custom blue background color using a hex code.

Tailwind

<div class="bg-[#3490dc] p-4">Hello with blue background</div>

This uses rgb() color for the text.

Tailwind

<p class="text-[rgb(255,99,71)]">Tomato colored text</p>

This uses hsl() color for a bright green background.

Tailwind

<button class="bg-[hsl(120,100%,50%)] text-white p-2 rounded">Green button</button>

This uses rgba() for a half-transparent red border.

Tailwind

<div class="border-solid border-[3px] border-[rgba(255,0,0,0.5)] p-3">Semi-transparent red border</div>

Sample Program

This example shows a heading with a custom green text color, a paragraph with a custom dark red text color inside a light background box, and a button with a custom blue background that changes shade on hover.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Arbitrary Color Values Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center gap-6 p-6">
  <h1 class="text-[rgb(34,139,34)] text-3xl font-bold">Custom Green Text</h1>
  <div class="bg-[#ffdead] p-6 rounded shadow-md">
    <p class="text-[#8b0000]">This paragraph has a custom dark red text color.</p>
  </div>
  <button class="bg-[hsl(210,100%,50%)] text-white px-4 py-2 rounded hover:bg-[hsl(210,100%,40%)] transition">
    Custom Blue Button
  </button>
</body>
</html>

OutputSuccess

Important Notes

Always wrap your custom color value in square brackets to tell Tailwind it's an arbitrary value.

You can combine arbitrary colors with other Tailwind utilities like padding, margin, and rounded corners.

Use browser DevTools to inspect and tweak colors live for best results.

Summary

Arbitrary color values let you use any color by writing it inside square brackets.

You can use hex, rgb, rgba, hsl, or any valid CSS color format.

This helps you match exact colors without changing Tailwind's default settings.