Χρωματικές παλέτες

Το χρώμα blue στο Tailwind CSS

Οι 11 αποχρώσεις του blue στο Tailwind CSS, από blue-50 (η πιο ανοιχτή) έως blue-950 (η πιο σκούρα). Κάνε κλικ σε όποια τιμή θέλεις για να την αντιγράψεις.

Αποχρώσεις blue

HEX και RGB από το Tailwind v3· OKLCH από το Tailwind v4. Κάνε κλικ σε μια τιμή για να την αντιγράψεις.

blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-950

Αντιγραφή όλης της παλέτας

Tailwind v4 (CSS, @theme)

@theme {
  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-blue-900: oklch(37.9% 0.146 265.522);
  --color-blue-950: oklch(28.2% 0.091 267.935);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
          950: '#172554'
        }
      }
    }
  }
}

Μεταβλητές CSS (HEX)

:root {
  --blue-50: #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --blue-950: #172554;
}

Άλλα χρώματα του Tailwind

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyindigovioletpurplefuchsiapinkrose

Συχνές ερωτήσεις

Ποιος είναι ο κωδικός HEX του Tailwind blue-500;

Στο Tailwind v3 το blue-500 είναι #3B82F6, δηλαδή rgb(59, 130, 246). Στο Tailwind v4 ορίζεται ως oklch(62.3% 0.214 259.815).

Πώς χρησιμοποιώ το Tailwind blue στο έργο μου;

Με κλάσεις όπως bg-blue-500, text-blue-700 ή border-blue-200. Στο Tailwind v4 μπορείς να χρησιμοποιήσεις και τη μεταβλητή CSS var(--color-blue-500) στο δικό σου CSS.

Άλλα framework

Η χρωματική παλέτα του Tailwind CSSΗ χρωματική παλέτα του Material DesignΗ χρωματική παλέτα του BootstrapΧρωματικές παλέτες των framework

Τα Tailwind CSS, Material Design και Bootstrap είναι εμπορικά σήματα των κατόχων τους. Οι τιμές προέρχονται από την τεκμηρίωσή τους και από δημόσια πακέτα: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.