Warna cyan Tailwind CSS

11 nuansa warna cyan Tailwind CSS, dari cyan-50 (paling terang) hingga cyan-950 (paling gelap). Klik nilai mana pun untuk menyalinnya.

Nuansa cyan

HEX dan RGB dari Tailwind v3; OKLCH dari Tailwind v4. Klik sebuah nilai untuk menyalinnya.

cyan-50

cyan-100

cyan-200

cyan-300

cyan-400

cyan-500

cyan-600

cyan-700

cyan-800

cyan-900

cyan-950

Salin seluruh palet

Tailwind v4 (CSS, @theme)

@theme {
  --color-cyan-50: oklch(98.4% 0.019 200.873);
  --color-cyan-100: oklch(95.6% 0.045 203.388);
  --color-cyan-200: oklch(91.7% 0.08 205.041);
  --color-cyan-300: oklch(86.5% 0.127 207.078);
  --color-cyan-400: oklch(78.9% 0.154 211.53);
  --color-cyan-500: oklch(71.5% 0.143 215.221);
  --color-cyan-600: oklch(60.9% 0.126 221.723);
  --color-cyan-700: oklch(52% 0.105 223.128);
  --color-cyan-800: oklch(45% 0.085 224.283);
  --color-cyan-900: oklch(39.8% 0.07 227.392);
  --color-cyan-950: oklch(30.2% 0.056 229.695);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        cyan: {
          50: '#ecfeff',
          100: '#cffafe',
          200: '#a5f3fc',
          300: '#67e8f9',
          400: '#22d3ee',
          500: '#06b6d4',
          600: '#0891b2',
          700: '#0e7490',
          800: '#155e75',
          900: '#164e63',
          950: '#083344'
        }
      }
    }
  }
}

Variabel CSS (HEX)

:root {
  --cyan-50: #ECFEFF;
  --cyan-100: #CFFAFE;
  --cyan-200: #A5F3FC;
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;
  --cyan-800: #155E75;
  --cyan-900: #164E63;
  --cyan-950: #083344;
}

Warna Tailwind lainnya

slate gray zinc neutral stone red orange amber yellow lime green emerald teal sky blue indigo violet purple fuchsia pink rose

Pertanyaan umum

Apa kode HEX Tailwind cyan-500?

Di Tailwind v3, cyan-500 adalah #06B6D4, atau rgb(6, 182, 212). Di Tailwind v4, warna ini didefinisikan sebagai oklch(71.5% 0.143 215.221).

Bagaimana cara memakai Tailwind cyan di proyek saya?

Dengan class seperti bg-cyan-500, text-cyan-700, atau border-cyan-200. Di Tailwind v4, Anda juga bisa memakai variabel CSS var(--color-cyan-500) di CSS Anda sendiri.

Framework lainnya

Tailwind CSS, Material Design, dan Bootstrap adalah merek dagang dari pemiliknya masing-masing. Nilai-nilainya berasal dari dokumentasi dan paket publik mereka: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.