Вытворца каляровай палітры выявы — бясплатна
Здабывайце дамінантныя колеры з любой выявы з дапамогай k-сярэдніх квантавання колераў. Атрымлівайце hex-коды для 2–16 асноўных колераў вашага фотаздымка або лагатыпа.
Перацягніце файл сюды або націсніце, каб выбраць
JPG, PNG, WebP, GIF, HEIC, HEIF · апрацоўваецца на вашай прыладзе
або націсніце Ctrl+V, каб уставіць з буфера абмену
Парада: скрыншот можна ўставіць спалучэннем Ctrl+V
Вашы файлы ніколі не пакідаюць вашу прыладу. Уся апрацоўка адбываецца лакальна ў вашым браўзеры.
Тыповыя выкарыстанні
- Вынімайце колеры брэнду з лагатыпаАтрымайце роўныя hex-коды для дамінуючых коляроў у любым лагатыпе або выяве брэнду.
- Стварайце палітры вэб-дызайну з фотаграфіяўГенеруйце адпавядаючыя палітры колеру вэбсайта з герояў або фонавых выяваў.
- Вынімайце колеры з фотаграфіяў натхненняЗдабывайце палітры колераў з фота інтэр'ераў або моды, каб выкарыстаць у сваіх праектах.
- Аналізуйце палітры жывапісу і мастацтваВывучайце палітры колеру знаных жывапісаў або ваінага мастацтва шляхам выцяганення дамінуючых колеру.
- Тэма CSS з выяваўГенеруйце CSS-зменныя тэмы з выяваў — карысны для дынамічнай тэмазацыі або аўта-генерыраваных схем колеру.
Як гэта працуе
Выманне колераў працуе цалкам у вашым браўзеры з дапамогай уласнаручна напісанага алгарытму кластарызацыі k-means++, прыменанага да сырых піксельных дадзеных, счытаных з Canvas API — без сервера, без бібліятэкі трэціх бакоў. Той жа малюнак і налады колькасці колераў заўсёды вырабляюць тую ж палітру, бо алгарытм выкарыстоўвае дэтэрмінаваны псеўда-выпадковы генератар лікаў (mulberry32), а не Math.random.
- 1Canvas счытвае піксельныя дадзеныяМалюнак малюецца на закадравым элеменце HTML Canvas і памяншаецца да не больш за 200 пікселяў на самым доўгім баку. getImageData() Canvas API вяртае кожны піксель як сырыя байты RGBA, а цалкам празрыстыя піксель (альфа < 128) адкідваюцца перад пачаткам кластарызацыі.
- 2k-means++ кластарызуе піксельІніцыялізатар k-means++ дэтэрмінавана засявае цэнтроіды, потым алгарытм ітэруе да 20 разоў: кожны піксель прызначаецца свайму найбліжэйшаму цэнтроіду ў прасторы RGB, потым цэнтроіды пераразлічваюцца як сярэдняе ўсіх прызначаных пікселяў. Кластары, якія збіраюцца да таго ж шаснаццатковага значэння, аб'ядноўваюцца, так што кожны ўзор у выніку унікальны.
- 3Вылічаюцца метададзеныя для кожнага колеруКожны цэнтроід пераводзіцца ў HEX, HSL і сваю долю ад агульнай колькасці пікселяў (адсотак). Адносная яркасць WCAG вылічваецца згодна са стандартнай формулай, і каэфіцыенты кантрасту з чорным і белым паказваюцца побач з кожным узорам.
- 4Экспарт і вывад з дапамогай піпеткіПалітру можна скапіяваць як уласныя ўласцівасці CSS, зменныя SCSS, урывак канфігурацыі Tailwind ці JSON. Піпетка з націскам для ўзору супастаўляе ваш націск на папярэднім праглядзе назад з дакладнымі каардынатамі зыходнага пікселя на канвасе поўнага раздзялення, дадаючы колер гэтага пікселя ў асобны спіс абраных колераў. Паласу палітры PNG можна спампаваць праз Canvas toBlob().
Ваш малюнак ніколі не загружаецца — ён дэкадуецца і апрацоўваецца цалкам у памяці вашага браўзера, і толькі памер файла (у КБ) паведамляецца аналітыцы.
Звязаныя інструменты
Генератар выпадковых колераў
Ствараеце выпадковыя колеры па адным або ў выглядзе палітры з пяці, блакуйце патрэбныя, капіруйце значэнні HEX, RGB або HSL і экспартуйце палітру як PNG або CSS.
Генератар каляровай палітры
Генеруйце дадатковыя, аналагічныя, трыядныя і манахраматычныя каляровыя палітры з любога базавага колеру. Капіруйце hex-коды адным кліком.
Выбар колеру і генератар палітры
Выбірайце колеры, канвертуйце паміж HEX/RGB/HSL і стварайце гарманічныя палітры.