Уебсайтове и приложения
Изберете цветовете на марката, фона и акцентите, след което ги вмъкнете директно в CSS променливи, Tailwind или тема за Android.
Генератор на цветови палитри — Създавайте съчетани цветови палитри и ги експортирайте като код.
Изберете основен цвят и цветова схема и създайте балансирана палитра от 3 до 8 цвята. Запазете тези, които ви харесват, проверете колко четлив е бял и черен текст върху всеки от тях, след което копирайте кодовете като CSS променливи, Tailwind, Android colors.xml или Jetpack Compose. Всичко работи в браузъра ви, а запазените палитри остават на вашето устройство.
Създайте палитра
Работи в браузъра ви
Вашата палитра
Изберете цветовете, които ви харесват, след което натиснете „Генерирай“, за да промените останалите. Кликнете върху шестнадесетичен код, за да го копирате. Кликнете върху палитрата и натиснете клавиша „Пробел“, за да генерирате.
Експортирай като код
Запазени палитри
Все още няма запазени палитри. Натиснете „Запази палитра“, за да запазите такава на това устройство.
Ръководството
Ръководство за цветовата палитра: комбинации, контраст и експортиране в код
Научете как функционират цветовите схеми, проверете контраста на текста и приложете палитрата си в реален проект.
Какво представлява генераторът на цветови палитри?
Цветовата палитра е малък набор от цветове, които се съчетават добре помежду си. Дизайнерите ги създават въз основа на цветовото колело: избират един начален цвят, след което подбират други нюанси под фиксирани ъгли спрямо него, така че резултатът да изглежда хармоничен, а не случаен.
This generator does that for you. Choose a base colour and a scheme, lock the colours you like, and export the result as CSS, Tailwind, Android XML or Jetpack Compose code. Each swatch also shows its RGB and HSL values and how readable white and black text would be on it. Hex values are base 16: the Binary to Decimal Converter shows how they relate to ordinary numbers.
Защо хората създават цветови палитри
Презентации, плакати и документи
Изберете подходяща цветова комбинация за презентация, публикация в социалните мрежи или печатен дизайн, без да се налага да гадаете.
Диаграми и информационни табла
Създайте различаващи се, но хармонични цветове за редиците от данни и проверете контраста, за да останат надписите четливи.
Обяснение на цветовите схеми
| Схема | Как е изграден | Опитайте и използвайте |
|---|---|---|
| Аналогично | Съседни нюанси, раздалечени на 30° един от друг | Спокойно и естествено. Подходящо за фонове и нежен потребителски интерфейс. |
| Монохроматичен | Един цвят, различна светлина | Изчистен и хармоничен. Подходящ за минималистични дизайни. |
| Допълнително | Два противоположни нюанса, разположени на 180° един от друг | Висок контраст. Подходящ за ярък акцентен цвят. |
| Разделено допълващо | Един цвят плюс двата, които са до неговата противоположност | Контраст с по-малко напрежение в сравнение с допълващия. |
| Триадичен | Три нюанса, раздалечени един от друг на 120° | Живо и хармонично. Нуждае се от един доминиращ цвят. |
| Тетрадичен (квадратен) | Четири нюанса, раздалечени на 90° един от друг | Богат и разнообразен. Изглежда най-добре с един основен цвят. |
Как да използвате генератора на цветови палитри
- Изберете основен цвят от палитрата или въведете шестнадесетичен код. Изберете цветова схема и броя на цветовете, които желаете.
- Натиснете „Генерирай“, за да опитате с нова случайна основа. Натиснете „Заключи“ под всеки цвят, който искате да запазите.
- Проверете указанията за контраста върху всяка мостра. Стремете се към съотношение 4,5:1 или по-високо навсякъде, където текстът е разположен върху цвят.
- Кликнете върху шестнадесетичен код, за да го копирате, или отворете „Експортиране като код“ и изберете CSS, Tailwind, Android или Compose.
- Натиснете „Запази палитра“, за да я запазите на това устройство, „Копирай линк“, за да я споделите, или „Изтегли PNG“, за да получите изображение.
Цветови контраст и достъпност
Контрастно съотношение
Число от 1:1 (идентични) до 21:1 (черно на бяло), което сравнява яркостта на два цвята.
WCAG AA
Най-малко 4,5:1 за обикновен текст и 3:1 за едър текст (около 24 пиксела или 19 пиксела с удебелен шрифт). Това е обичайната норма, както от юридическа, така и от практическа гледна точка.
WCAG AAA
Най-малко 7:1 за обикновен текст. По-строго изискване, което е от полза за хората със слабо зрение.
Не разчитайте само на цвета
Приблизително един на всеки дванадесет мъже страда от някаква форма на нарушение на цветовото възприятие. Съчетавайте цветовете с надписи, икони или мотиви, за да не се изгуби смисълът.
Как изглеждат форматите за експортиране
CSS: --color-1: #1f3a5f;
SCSS: $color-1: #1f3a5f;
Tailwind: 'palette-1': '#1f3a5f',
Android: #1F3A5F
Compose: val Palette1 = Color(0xFF1F3A5F)
JSON: ["#1f3a5f", "#ff5733"]
В Android Studio поставете XML кода в res/values/colors.xmlили добавете редовете от Compose във вашия Color.kt файл. Стойността за Compose включва префикса FF за пълна непрозрачност (alpha).
Съвети за палитри, които дават резултат
- Използвайте един доминиращ цвят, един или два допълващи цвята и един неутрален. Равномерното разпределение на всеки цвят обикновено създава усещане за претрупаност.
- Проверете контраста на текста върху всеки цвят на фона, преди да се спрете на определена цветова палитра.
- Определете основния цвят на вашата марка и създавайте варианти около него, за да проучите възможностите.
- Разгледайте палитрата на истински екран в размерите, в които ще се показва, а не само като мостри.
- Изпробвайте и в тъмен режим: цвят, който изглежда добре на бял фон, може да не изглежда добре на почти черен.
Ограничения и поверителност
Поверителност
Палитрите се генерират в браузъра ви. Запазените палитри се съхраняват в локалното хранилище на браузъра ви на вашето устройство и никога не се качват.
Ограничения
Цветовете се показват в цветовото пространство sRGB, като визията им варира в зависимост от екрана. Палитрите са препоръки, основани на теорията на цветовете, и не заместват тестването с реални потребители. Инструментът не проверява доколко е подходящ за хора с цветова слепота, освен по отношение на контраста.
Често задавани въпроси
Често задавани въпроси за генератора на цветови палитри
Как работи генераторът на цветови палитри?
Изберете основен цвят и цветова схема, и инструментът ще превърне основния цвят в набор от съчетани цветове, като използва цветовото колело. Натиснете „Генерирай“, за да получите нов случаен основен цвят, или фиксирайте цветовете, които ви харесват, и генерирайте останалите.
Каква е разликата между цветовите схеми?
Аналогичната комбинация използва съседни нюанси за постигане на спокоен вид. Комплементарната комбинация съчетава противоположни нюанси за контраст. Разделената комплементарна и триадичната комбинация използват три равномерно разпределени нюанса, тетрадичната – четири, а монохроматичната запазва един нюанс и варира яркостта.
Как да запазя един цвят, докато променям останалите?
Натиснете „Заключване“ под някоя от цветните мостри. Заключените цветове остават непроменени, когато натиснете „Генериране“, промените основата или промените схемата. Редактирането на цветна мостра с бутона „Редактиране“ също я заключва.
Какво означават стойностите на контраста?
Всяка проба показва съотношението на контраста за бял и за черен текст върху съответния цвят. WCAG изисква съотношение от поне 4,5:1 за стандартен текст (AA), 7:1 за по-строгото ниво AAA и 3:1 за голям текст.
Кои формати за експортиране са налични?
HEX списък, CSS променливи, SCSS променливи, JSON масив, конфигурация на Tailwind, файл colors.xml за Android и цветови стойности за Jetpack Compose, така че да можете да вмъкнете палитрата директно в проекта.
Мога ли да споделя или да запазя палитрата си?
Да. Опцията „Копирай линк“ създава уеб адрес, който отваря отново същите цветове, „Изтегли PNG“ запазва изображение на палитрата, а „Запази палитра“ съхранява до 12 палитри в този браузър.
Защо цветовете ми изглеждат по-различно на друг екран?
Екраните се различават по яркост, точност на цветовете и цветови профил. Шестнадесетичните кодове описват цвета числово, но това как изглежда той зависи от дисплея. Проверете важните цветове на устройствата, които ще използва вашата аудитория.
Колко цвята трябва да има една палитра?
Много дизайни изглеждат добре с пет цвята: един основен цвят, един или два допълващи цвята, светъл фон и тъмен цвят на текста. Този инструмент ви позволява да изберете от 3 до 8 цвята.
Генераторът безплатен ли е и съхраняват ли се данните ми?
Услугата е безплатна. Палитрите се генерират в браузъра ви. Запазените палитри се съхраняват на вашето устройство в локалното хранилище и никога не се качват в интернет.
Мога ли да поставя линк към палитра?
Да. Добавете ?colors=1f3a5f-ff5733-00aa88 към адреса на страницата, като включите от 2 до 8 шестнадесетични кода, разделени с тирета, без знака #.
От потребителите на този инструмент
Отзиви
Зареждане на отзиви…
Продължавай
Още инструменти в кутията
На началната страница са представени още десетки безплатни инструменти, за които не се изисква API ключ.
Конвертор на регистри
Преобразувайте текст в главни букви, camelCase, title case, snake_case и др.
Отвори инструментБрояч на думи
Преброявайте думите, символите, изреченията и времето за четене, докато пишете.
Отвори инструментИнструмент за премахване на празни пространства
Премахнете излишните интервали и коригирайте неравномерното разстояние между редовете.
Отвори инструментПрограма за сравняване на текстове
Сравнете два текста ред по ред, за да видите какво се е променило.
Отвори инструмент