Кольори та дизайн

Добирайте, перетворюйте й поєднуйте кольори та генеруйте CSS для своїх проєктів.

• Вибір кольору Безкоштовний онлайн-вибір кольору. Виберіть будь-який колір і миттєво скопіюйте його коди HEX, RGB, HSL, HSV і CMYK з контрастом на білому й чорному.
• Генератор border-radius Візуально налаштуйте CSS border-radius перетягуванням точок. Кожен кут у px або %, 8-значний еліптичний запис, органічні форми та готовий код.
• Генератор box-shadow Створюйте багатошарові тіні CSS box-shadow з живим переглядом. Зсув, розмиття, колір, непрозорість, inset, шаблони неоморфізму та готовий код.
• Генератор clip-path Малюйте CSS clip-path фігури перетягуванням точок. Редагуйте багатокутники, кола, еліпси й прямокутники, беріть шаблони зірок і стрілок та копіюйте код.
• Генератор CSS-градієнтів Створюйте лінійні, радіальні й конічні CSS-градієнти з живим переглядом. Додавайте та перетягуйте опорні кольори, задавайте кут і копіюйте чистий код.
• Генератор Flexbox і Grid Будуйте макети flexbox і CSS grid візуально. Задавайте властивості контейнера й елементів, називайте області сітки та копіюйте чистий CSS і HTML.
• Генератор відтінків кольору Створюйте світліші й темніші відтінки кольору кроками 5, 10, 20 або 25 % в OKLCH чи sRGB та експортуйте як змінні CSS або конфігурацію Tailwind.
• Генератор палітри кольорів Створюйте палітри з одного базового кольору за правилами колірної гармонії: додаткова, аналогова, тріада, тетрада, квадрат і монохромна схеми.
• Зменшення розміру шрифтів Залиште у шрифті лише потрібні символи за допомогою HarfBuzz у браузері. Менший TTF/OTF і WOFF, перегляд і правило @font-face з unicode-range.
• Калькулятор співвідношення сторін Калькулятор співвідношення сторін: спрощуйте ширину й висоту, змінюйте розмір зі збереженням пропорцій, порівнюйте 16:9, 4:3, 21:9 і копіюйте CSS-код.
• Конвертер px в rem Конвертуйте px в rem та em з будь-яким кореневим розміром шрифту, створюйте таблицю конвертації й перетворюйте px у CSS на rem одним клацанням.
• Конвертер кольорів Конвертуйте колір між HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH і OKLCH. Вставте код, побачте колір і скопіюйте будь-який формат одним клацанням.
• Палітра із зображення Витягніть палітру кольорів із зображення. Завантажте фото й отримайте домінантні кольори як коди HEX із часткою кожного, готові до копіювання.
• Перевірка контрасту кольорів Безкоштовна перевірка контрасту за WCAG. Введіть колір тексту й тла, щоб отримати коефіцієнт контрасту, результати AA/AAA і найближчий прийнятний колір.
• Пошук назви кольору Дізнайтеся назву будь-якого кольору. Введіть код HEX або RGB і отримайте 5 найближчих назв із понад 30 000 іменованих кольорів і найближчу назву CSS.
• Поєднання шрифтів Підбирайте пари шрифтів для заголовків і тексту серед 20 шрифтів з відкритою ліцензією, змінюйте розмір та інтервал і копіюйте стеки CSS font-family.
• Піпетка кольору із зображення Завантажте зображення й клацніть піксель, щоб отримати колір у HEX, RGB, HSL, HSV і CMYK. Лупа, усереднення й список кольорів у браузері.
• Редактор cubic-bezier Створюйте криві плавності CSS перетягуванням точок cubic-bezier, порівнюйте їх із linear у живій анімації й копіюйте cubic-bezier() або варіант linear().
• Симулятор дальтонізму Безкоштовний симулятор дальтонізму: перегляньте будь-яке зображення з протанопією, дейтеранопією, тританопією, їхніми м’якшими формами чи ахроматопсією.