Color Palette сканира всеки елемент на уебстраница и извлича пълния набор от използвани цветове — от текст и фонове до рамки, сенки и акценти. Цветовете се показват като визуални мостри, сортирани по честота (най-използваните първи), като всяка показва своята HEX стойност и брой на използване. Кликнете върху която и да е мостра, за да я копирате, или експортирайте цялата палитра като списък с цветови кодове.
Всеки добре проектиран уебсайт има последователна цветова палитра — обикновено 3-8 основни цвята плюс няколко неутрални. Color Palette извлича тази палитра автоматично, като сканира изчислените стойности за цвят (color), фонов цвят (background-color), цвят на рамка (border-color) и цвят на сянка (box-shadow) на всеки елемент. Резултатът е сортирана по честота колекция от всеки цвят на страницата, което ви дава пълната картина на цветовата система на сайта. Доминиращите цветове (основният цвят на марката, фоновият цвят, цветът на текста) се появяват първи с висок брой на използване. Акцентните цветове и еднократните стойности се появяват по-надолу. Това е безценно за проучване на дизайна — посетете всеки уебсайт и извлечете точната му цветова палитра за секунди. Също така е полезно за одит на вашия собствен сайт: има ли случайни цветове, които не принадлежат към вашата система за дизайн? Използвате ли 5 леко различни нюанса на сивото, когато спецификацията на дизайна определя само 3? Color Palette прави цялото използване на цветовете видимо и измерваемо.
Сканира всеки видим елемент на страницата и извлича цветове от изчислените свойства: color, background-color, border-color, box-shadow color, outline-color и text-decoration-color. Улавя се всеки цвят, използван на страницата.
Цветовете са сортирани по брой на използване — най-използваният цвят се появява първи. Доминиращите цветове на марката и фоновете излизат най-отгоре, докато еднократните акцентни цветове се появяват последни. Незабавно вижте основните, вторичните и акцентните цветове на страницата.
Всеки цвят се рендира като голяма визуална мостра с неговия HEX код и брой на използване, показани под него. Мострите са достатъчно големи, за да се разграничат фините разлики в нюансите (като #333 спрямо #2a2a2a).
Кликнете върху всяка мостра на цвят, за да копирате нейната HEX стойност в клипборда си незабавно. Няма нужда да отваряте панел с цветове или вторичен диалогов прозорец — едно кликване, копирано, готово.
Кликнете върху „Export All“ (Експортиране на всички), за да копирате цялата палитра като форматиран списък с HEX цветови кодове. Поставете в инструмент за дизайн, файл с CSS променливи или документация на цветовете. Списъкът запазва подредбата по честота.
Цветовете са нормализирани (представянията на един и същ цвят в rgb и hex са обединени) и дедупликирани. Палитрата показва само уникални цветове с комбиниран брой на използване за дублираните представяния.
Посетете уебсайтове с красиви цветови схеми и извлечете точната им палитра. Използвайте цветовете като отправна точка за вашия собствен дизайн — или просто документирайте кои цветови комбинации работят добре заедно.
Стартирате Color Palette на собствения си сайт, за да проверите последователността на цветовете на марката. Има ли 4 леко различни сини цвята, където трябва да има 1? Пълзят ли извън марковите цветове? Сортирането по честота прави несъответствията очевидни.
Експортирайте палитрата и я конвертирайте в CSS потребителски свойства (--color-primary, --color-secondary и др.). Изходът, сортиран по честота, ви показва кои цветове заслужават роли на основни, вторични и акцентни.
Извличайте цветови палитри от уебсайтове на конкуренти, за да разберете позиционирането на тяхната марка. Топли цветове спрямо студени цветове, висок контраст спрямо приглушени — палитрата разкрива съзнателни дизайнерски избори.
Вижте всички цветове на текста заедно с фоновите цветове. Има ли комбинации текст-фон с твърде нисък контраст? Палитрата ви дава пълния набор от цветове, които трябва да проверите спрямо изискванията за контраст WCAG.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Color Palette. Инструментът сканира всеки елемент на страницата и извлича всички стойности на цветовете.
Появява се мрежа от мостри на цветове, сортирани по честота на употреба. Най-използваните цветове са най-отгоре. Всяка мостра показва HEX кода и броя на елементите, използващи този цвят.
Кликнете върху която и да е мостра, за да копирате конретната HEX стойност в клипборда си. Появява се кратко потвърждение.
Кликнете върху „Export All“, за да копирате всеки цвят като форматиран списък. Поставете във вашия файл с CSS променливи, инструмент за дизайн или документация.
Навигирайте до различни страници на същия сайт и извличайте палитри, за да проверите последователността на цветовете в целия сайт.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
