Värien muunnos eri formaattien välillä, palettien generointi ja WCAG-kontrastin tarkistus. Hyödyllinen työkalu suunnittelijoille ja frontend-kehittäjille.
Aloittelija · 3-4 tuntia · Next.js, TypeScript, Tailwind CSS
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
Luo värityökalukokoelma. Välilehdet: 1. Converter (HEX <-> RGB <-> HSL) 2. Palette Generator (generoi paletteja) 3. Contrast Checker (WCAG-tarkistus) 4. Tailwind Colors (löydä Tailwind-vastine) Converter: - Color picker - Input eri formaateissa - Näytä väri isosti - Kopioi kaikissa formaateissa Palette Generator: - Valitse lähtöväri - Valitse tyyppi (complementary, triadic, jne.) - Näytä 5-7 väriä - Export paletit Contrast Checker: - Tekstiväri + taustaväri - Kontrastisuhde (esim. 4.5:1) - WCAG AA/AAA status - Live preview Tech: Next.js, TypeScript, Tailwind CSS
Muunna värejä eri formaatteihin.
Luo värimuunnin: input HEX, RGB tai HSL formaatissa. Näytä väri ja muunna automaattisesti kaikkiin muotoihin. Lisää color picker ja kopioi-napit.
Generoi väripaletteja.
Luo paletin generointi: valitse pääväri, generoi harmoniset värit (complementary, analogous, triadic). Näytä paletti ja anna koodit eri formaateissa.
Tarkista WCAG-kontrasti.
Luo kontrastintarkistaja: valitse teksti- ja taustaväri. Laske kontrastisuhde ja näytä WCAG AA/AAA yhteensopivuus. Näytä esikatselu tekstistä.
Värimuunnos (HEX, RGB, HSL)
Color picker
Paletin generointi
Kontrastin tarkistus
Tailwind värikoodit
Kun perusprojekti on valmis:
Värien tunnistus kuvasta
Gradient-generaattori
Color blindness simulator
Export CSS variables
Suositut design system -värit
Muunna Markdown HTML:ksi reaaliajassa jaetulla näkymällä. Kirjoitat vasemmalle ja näet lopputuloksen oikealla - kätevä työkalu blogikirjoittajille ja kehittäjille.
Muotoile, validoi ja vertaa JSON-dataa yhdessä näppärässä työkalussa. Korvaa usean erillisen verkkosivun tarpeen ja tekee API-kehityksestä sujuvampaa.
Testaa ja debuggaa säännöllisiä lausekkeita visuaalisella editorilla. Näe matchit reaaliajassa, ymmärrä regex-syntaksi ja tallenna hyödylliset patternit myöhempää käyttöä varten.
Valitse työkalu ja käytä aloituspromptiä.