Värien muunnos eri formaattien välillä, palettien generointi ja WCAG-kontrastin tarkistus. Hyödyllinen työkalu suunnittelijoille ja frontend-kehittäjille.
Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.
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
Tässä projektissa rakennetaan seuraavat ominaisuudet:
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ä.
Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:
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.
Selaa kaikkia kehittäjätyökalut projekteja tai tutustu muihin kategorioihin.