Сколько стоят 500, 600, 700 у.е. шаги в Figma для цветов

Я хочу сделать миксины SASS для моей цветовой схемы в стиле попутного ветра.

Для каждого цвета я хочу создать версию 400, 300, 200, 100 и так далее.

Теперь было бы неплохо узнать, в каком процентном соотношении это попутный ветер.

Я ничего не нашел в Интернете по этому поводу.

3 ответа

Решение

На самом деле я использую https://javisperez.github.io/tailwindcolorshades/ для генерации оттенков, которые он будет выводить примерно так:

  concrete: {
    100: '#FEFEFE',
    200: '#FCFCFC',
    300: '#FAFAFA',
    400: '#F6F6F6',
    500: '#F2F2F2',
    600: '#DADADA',
    700: '#919191',
    800: '#6D6D6D',
    900: '#494949',
  },

Что вы можете включить в свой tailwind.config.js файл.

Я нашел этот плагин figma: https://www.figma.com/community/plugin/815578663120885543/Tailwind-Color-Generator

Это создает настраиваемую цветовую палитру, которую вы можете использовать в своих проектах, а затем экспортировать ее в файлы SCSS - результат должен быть таким же.

Все цвета по умолчанию Tailwind подбираются вручную, у них нет инструмента для создания цветовых палитр, поэтому вам придется сделать то же самое.

Из документов:

Создание пользовательских цветовых палитр

Часто задают вопрос: "Как мне создать 100–900 оттенков моих собственных цветов?".

Плохие новости: цвет - это сложно, и мы еще не нашли инструмент, который бы хорошо справлялся с созданием таких цветовых палитр. Мы выбрали все стандартные цвета Tailwind вручную, балансируя их на глаз. Сожалею!

Другие вопросы по тегам