Aloittelija3-4 tuntia🛠️ Kehittäjätyökalut

Värityökalut

Värien muunnos, paletit ja kontrastin tarkistus.

Teknologiat:Next.jsTypeScriptTailwind CSS

Aloitusprompt

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

Ominaisuudet

Tässä projektissa rakennetaan seuraavat ominaisuudet:

1Värimuunnos (HEX, RGB, HSL)
2Color picker
3Paletin generointi
4Kontrastin tarkistus
5Tailwind värikoodit

Vaiheet

1

Värimuunnin

Muunna värejä eri formaatteihin.

Prompti:

Luo värimuunnin: input HEX, RGB tai HSL formaatissa. Näytä väri ja muunna automaattisesti kaikkiin muotoihin. Lisää color picker ja kopioi-napit.
2

Palettigenerointi

Generoi väripaletteja.

Prompti:

Luo paletin generointi: valitse pääväri, generoi harmoniset värit (complementary, analogous, triadic). Näytä paletti ja anna koodit eri formaateissa.
3

Kontrastintarkistus

Tarkista WCAG-kontrasti.

Prompti:

Luo kontrastintarkistaja: valitse teksti- ja taustaväri. Laske kontrastisuhde ja näytä WCAG AA/AAA yhteensopivuus. Näytä esikatselu tekstistä.

Laajennusideat

Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:

  • Värien tunnistus kuvasta
  • Gradient-generaattori
  • Color blindness simulator
  • Export CSS variables
  • Suositut design system -värit

Lisää projekti-ideoita

Selaa kaikkia kehittäjätyökalut projekteja tai tutustu muihin kategorioihin.