🎨 Design / CSS
CSS-генератори, кольорові палітри, калькулятори співвідношення та DPI екрану
Генеруйте гармонійні палітри з будь-якого базового кольору.
Відкрити інструмент →Розраховуйте та конвертуйте пропорції для відео та зображень.
Відкрити інструмент →Розрахуйте PPI/DPI з роздільної здатності та розміру екрану.
Відкрити інструмент →Генеруйте фавіконки з тексту, емодзі або зображень.
Відкрити інструмент →Colour, proportion and asset tools for the point in a design where you need a number rather than an opinion. Building a palette, checking an aspect ratio, working out real screen density, and generating favicons.
These lean toward the mechanical end of design work — the parts with defensible right answers, like whether two colours pass contrast or what 1920×1080 reduces to.
Which tool do I want?
| If you… | Use |
|---|---|
| You are building a colour scheme | Генератор палітр кольорів |
| You need a ratio simplified or dimensions that match one | Калькулятор пропорцій |
| You want the true DPI of a display | Калькулятор DPI екрану |
| You need favicons in the right sizes | Генератор Favicon |
Contrast ratio is about luminance, not how different colours look
Two colours can sit far apart on a colour wheel and still fail accessibility. WCAG contrast is computed from relative luminance, which weights green far more heavily than red and red more than blue — so mid-blue text on a mid-red background looks vividly different and can fall below the 4.5:1 minimum for body text.
The practical consequence is that you cannot judge contrast by eye, especially on a bright calibrated monitor. Measure it. Body text needs 4.5:1; large text, meaning roughly 24px or 19px bold and above, needs 3:1; and interface components and focus indicators need 3:1 against what surrounds them.
Yellow is the usual casualty. Yellow on white almost never passes, however saturated, because both are high-luminance. Darkening the yellow toward amber fixes it while keeping the hue.