Palette Studio Culori, palete si gradiente, facute local.
STUDIO DE CULORI, FARA SERVER

Culoarea potrivita, masurata corect.

Extragi o paleta dintr-o fotografie, generezi armonii si gradiente, verifici contrastul WCAG si vezi cum arata totul pentru ochii cu daltonism. Totul ruleaza in browser: niciun fisier nu pleaca de pe dispozitivul tau.

Incepe cu o culoare Despre

Fara cont, fara incarcare, fara analytics.

#2563ebazuriu
rgb(37, 99, 235)RGB
hsl(221, 83%, 53%)HSL
5.17:1pe alb
01

1. Alege culoarea de baza

Scrie un cod hex, foloseste selectorul sau ia culoarea dintr-o imagine. Totul se salveaza local.

Selector de culoare
221
83%
53%
RGB
Formate
HEX
#2563eb
RGB
rgb(37, 99, 235)
HSL
hsl(221, 83%, 53%)
HSV
hsv(221, 84%, 92%)
CMYK
cmyk(84%, 58%, 0%, 8%)
LAB
lab(48.5, 40.1, -74.2)
Cel mai apropiat nume
azuriu
dE 14.5

Nuante si umbre

Scala generata din culoarea de baza, cu contrastul pe alb si pe negru pentru fiecare treapta.

Ultimele culori

Culorile folosite raman salvate in browser.

Culorile folosite apar aici.

02

2. Armonii

Reguli clasice de rotire a nuantei in jurul cercului de culori.

3 culori
03

3. Paleta dintr-o imagine

Trage o fotografie aici sau alege un fisier. Algoritmul k-means gaseste culorile dominante si cat la suta din imagine ocupa fiecare.

Trage imaginea aici

PNG, JPEG, WebP, GIF sau AVIF. Imaginea ramane in memoria paginii.

6

Culori dominante

Apasa o culoare ca sa devina baza. Procentajul arata cat ocupa in imagine.

Nicio imagine incarcata inca.

Paleta salvata

Aceasta paleta este folosita pentru gradient si pentru export.

Paleta salvata este goala. Adauga culori din armonii sau din imagine.

04

4. Gradient

Construieste un gradient din paleta si exporta-l ca CSS sau SVG.

Tip
135deg
Puncte de culoare
Cod CSS 

        

          
          
        

      

    

  


  
  

    05
    
5. Verificare contrast

    
Raportul WCAG 2.x intre text si fundal, cu pragurile exacte.

  

  

    

      

        

          
          
        

        

          
          
        

      

      

        
        
      

      

      

        
Text normalAA: minim 4.5:1 pentru text normal, 3:1 pentru text mare-

        
Text mareAA mare: 3:1, AAA mare: 4.5:1-

        
Elemente de interfataElemente grafice: minim 3:1-

      

    


    

      

        

          Raport de contrast
          5.17:1
        

        AA
      

      

        
Aa - 24 px bold

        
Text normal de 14 px pe fundalul ales, exact asa cum il vede cititorul.

      

      

        Sugestie accesibila
        

        
      

      

    

  


  
  

    06
    
6. Simulare daltonism

    
Matricele Machado, Oliveira si Fernandes (2009), severitate maxima. Aproape 1 din 12 barbati vede altfel rosul si verdele.

  

  

    

    Paleta salvata, aceeasi simulare
    

    
Simularea este un model matematic, nu o diagnosticare. Verifica intotdeauna si cu o a doua unealta daca proiectul este critic.

  


  
  

    07
    
7. Export

    
Formate generate local, fara nicio cerere in retea.

  

  

    

      

      

        
        
      

    

    

    

      
      
    

    
  


  
  

    
Despre aplicatie

  

  

    
Palette Studio este un singur fisier HTML.

    

      

        
Confidentialitate

        
Imaginile sunt decode in memoria paginii si nu sunt incarcate nicaieri.

      

      

        
Limite oneste

        
Extragerea paletei depinde de iluminarea fotografiei.

      

      

        
Scurtaturi

        
    
          
  • Ctrl + Z Anuleaza ultima actiune
    • 
          
  • R Culoare aleatoare
    • 
          
  • C Copiaza codul hex
    • 
        

        
v1 Codul sursa

      

    

    
Licenta Apache-2.0. Codul sursa este public pe GitHub.

    
Sustine proiectul