Κατανόηση χρωμάτων και μονάδων CSS
Μορφές χρωμάτων HEX, RGB και HSL
Το CSS υποστηρίζει πολλές μορφές χρωμάτων. <strong>Τα χρώματα HEX</strong> χρησιμοποιούν εξαψήφια δεκαεξαδική σημειογραφία (π.χ., <code>#22c55e</code>) και είναι η πιο κοινή μορφή στο web design.
<strong>RGB</strong> χρησιμοποιεί δεκαδικές τιμές από 0 έως 255 για κάθε κανάλι. Το RGBA επεκτείνει αυτό με ένα κανάλι άλφα για έλεγχο διαφάνειας.
<strong>HSL</strong> είναι το πιο διαισθητικό για τους σχεδιαστές. Η απόχρωση είναι μια μοίρα στον τροχό χρωμάτων (0–360), ενώ ο κορεσμός και η φωτεινότητα είναι ποσοστά.
CSS Named Colors
CSS provides 147 named colors like coral, steelblue, and rebeccapurple. While convenient for prototyping, named colors offer limited precision. Converting a CSS color name to HEX or RGB gives you exact values you can fine-tune for production use.
CMYK για εκτύπωση
<strong>CMYK</strong> είναι το πρότυπο μοντέλο χρωμάτων για εκτύπωση.
HSV σε εργαλεία σχεδίασης
<strong>HSV</strong> είναι το εγγενές μοντέλο χρωμάτων σε Photoshop, Figma και Sketch.
PX έναντι REM: Μονάδες CSS
<strong>Τα Pixel (PX)</strong> είναι απόλυτες μονάδες. <strong>Οι μονάδες REM</strong> είναι σχετικές με το μέγεθος γραμματοσειράς του ριζικού στοιχείου (συνήθως 16px). Η χρήση REM εξασφαλίζει αναλογική κλιμάκωση.
Η μετατροπή είναι απλή: διαιρέστε τα pixel με 16 για να λάβετε τιμές REM. 24px ισούται με 1.5rem.
<strong>Οι μονάδες EM</strong> είναι σχετικές με το μέγεθος γραμματοσειράς του γονικού στοιχείου.
- 1rem = 16px (default browser setting)
- 1em = parent font-size (context-dependent)
- 0.75rem = 12px — common for small/caption text
- 1.25rem = 20px — common for subheadings
- 2rem = 32px — common for section headings
Γιατί να χρησιμοποιήσετε μετατροπείς CSS;
Η χειροκίνητη μετατροπή μεταξύ μορφών χρωμάτων είναι κουραστική και επιρρεπής σε σφάλματα. Τα αυτοματοποιημένα εργαλεία μετατροπής εξοικονομούν χρόνο.
- Instant results — paste a value and get the converted output immediately, no formulas needed.
- Copy-ready output — every result includes a one-click copy button with properly formatted CSS syntax.
- Color preview — see a live swatch of the converted color to visually confirm accuracy.
- No installation — works in any browser, on any device. No extensions, downloads, or signups.
- Developer-friendly — shareable URLs with pre-filled values for easy team collaboration.
Common CSS Conversion Workflows
- Design handoff: Figma and Sketch export colors as HEX. Convert to RGB or HSL if your codebase uses those formats.
- Dark mode generation: Take your light-mode HSL palette, adjust lightness values, and convert back to HEX.
- Accessibility checks: Convert colors to RGB to calculate contrast ratios using the WCAG luminance formula.
- Legacy migration: Convert pixel-based layouts to rem-based responsive systems during refactors.
- Cross-browser debugging: Quickly convert colors to match your source code format.
Supported Conversions
| From |
To |
Category |
| HEX | RGB, HSL, RGBA, CSS Name | Color |
| RGB | HEX, HSL | Color |
| HSL | HEX, RGB | Color |
| RGBA | HEX | Color |
| CSS Name | HEX, RGB, HSL | Color |
| PX | REM | Unit |
| REM | PX | Unit |