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

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

Αποχρώσεις orange

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

orange-50

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

orange-700

orange-800

orange-900

orange-950

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

Tailwind v4 (CSS, @theme)

@theme {
  --color-orange-50: oklch(98% 0.016 73.684);
  --color-orange-100: oklch(95.4% 0.038 75.164);
  --color-orange-200: oklch(90.1% 0.076 70.697);
  --color-orange-300: oklch(83.7% 0.128 66.29);
  --color-orange-400: oklch(75% 0.183 55.934);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-orange-700: oklch(55.3% 0.195 38.402);
  --color-orange-800: oklch(47% 0.157 37.304);
  --color-orange-900: oklch(40.8% 0.123 38.172);
  --color-orange-950: oklch(26.6% 0.079 36.259);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        orange: {
          50: '#fff7ed',
          100: '#ffedd5',
          200: '#fed7aa',
          300: '#fdba74',
          400: '#fb923c',
          500: '#f97316',
          600: '#ea580c',
          700: '#c2410c',
          800: '#9a3412',
          900: '#7c2d12',
          950: '#431407'
        }
      }
    }
  }
}

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

:root {
  --orange-50: #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #F97316;
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  --orange-800: #9A3412;
  --orange-900: #7C2D12;
  --orange-950: #431407;
}

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

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

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

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

Στο Tailwind v3 το orange-500 είναι #F97316, δηλαδή rgb(249, 115, 22). Στο Tailwind v4 ορίζεται ως oklch(70.5% 0.213 47.604).

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

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

Άλλα 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.