Is there a Bootstrap 4 palette?

[frederikhors]

Is there a Bootstrap 4 palette for tailwind (maybe as a plugin)?

[estevanmaito]

You could use https://javisperez.github.io/tailwindcolorshades/#/ to generate the palette for each color. The problem with this approach is that it places the given color in the middle of the palette and generate the other colors around it.

I'm developing something to generate palettes based on the luminance of colors (based on the work of Steve in Tailwind's palette). I took the colors from Bootstrap docs and fed my generator. The result is the screen below. It places the original colors (with dot) where they should be and generate the rest of the palette. (It's a work in progress, as you can see by the teal palette)

If you're interested in using it, just place the code below inside theme.extend.colors in your config file (note that it has an additional 050 color, based on Tailwind UI):

purple: {050: '#F6F5FF',100: '#EDECFE',200: '#DCD7FE',300: '#CABFFD',400: '#AC94FA',500: '#9262F9',600: '#7E3AF2',700: '#6812F3',800: '#4D0CCF',900: '#3A05B8'},
blue: {050: '#ECF7FD',100: '#DEF0FD',200: '#BCE1FB',300: '#8ACEFE',400: '#2EA4FF',500: '#007BFF',600: '#0164D5',700: '#025AA2',800: '#034A7C',900: '#043D6C'},
green: {050: '#F7FDF9',100: '#E7F8EB',200: '#C6F1D3',300: '#73E293',400: '#2FC652',500: '#29A847',600: '#288F38',700: '#27772C',800: '#246124',900: '#204C20'},
yellow: {050: '#FEFCEB',100: '#FEF4C2',200: '#FFE066',300: '#FFC105',400: '#E79F04',500: '#C97C08',600: '#AC5E0C',700: '#92480C',800: '#77380D',900: '#672F0F'},
red: {050: '#FDF1F7',100: '#FCE8F0',200: '#FAD1DE',300: '#EFB3C3',400: '#E5768A',500: '#DC3848',600: '#CA213D',700: '#AE1928',800: '#900E24',900: '#7A0B21'},
orange: {050: '#FEF4EB',100: '#FFEAD6',200: '#FFD3AD',300: '#FFB05C',400: '#FD7E17',500: '#F16609',600: '#D3530D',700: '#B64211',800: '#9A3513',900: '#802A14'},
pink: {050: '#FEF1FB',100: '#FEE7F7',200: '#FDCEEB',300: '#FDB0D9',400: '#FB74BE',500: '#E93F8E',600: '#D91C68',700: '#AB1752',800: '#8C0D4A',900: '#750A47'},
indigo: {050: '#F7F5FA',100: '#F1EBF9',200: '#E1D7F4',300: '#D0BFED',400: '#B194F0',500: '#9367E4',600: '#7B4BD2',700: '#6F42C2',800: '#5521B5',900: '#491D96'},
teal: {050: '#F4FAF9',100: '#DFF7EF',200: '#B7F1DF',300: '#61E5BE',400: '#20CB98',500: '#2A9D80',600: '#377665',700: '#37685B',800: '#374E47',900: '#3D3D3D'},
cyan: {050: '#EFF8FA',100: '#DFF2F6',200: '#BFE8EE',300: '#72DCE3',400: '#27BDCE',500: '#17A4BA',600: '#197385',700: '#1A6675',800: '#15505B',900: '#16434B'}

[frederikhors]

I'm developing something...

Is it a real project? Will you release it? I can wait and maybe I can help you testing it.

[estevanmaito]

Yeah, I'll release it soon. Just need to find a way to "package" it into a web app.

[tombohub]

@frederikhors do you need like bootstrap variables primary , secondary or really actual bootstrap colors?
If you need an easy palette generator check out my project https://palettolithic.com
let me know how can I improve it