Approfondimenti sul codice colore #B6CEE2

Tutte le conversioni, armonie e controlli di accessibilità di cui hai bisogno per progettare con sicurezza.

RGB:rgb(182, 206, 226)
HSL:hsl(207, 43%, 80%)
Seleziona il colore dall'immagineSelezionatore di colori
HEX
#B6CEE2
RGB
182, 206, 226
HSL
207°, 43%, 80%
HSV
207°, 19%, 89%
CMYK
19%, 9%, 0%, 11%

Conversione Colore

Genera valori attraverso più modelli di colore in un unico posto.

#B6CEE2

≈ Blu Acciaio

Schede colore di riferimento

Un ΔE inferiore significa una corrispondenza visiva più vicina

Tinte e sfumature

Scopri come si comporta #B6CEE2 quando lo mescoli con il bianco o il nero. Questi campioni sono perfetti per stati hover, ombre e sfondi.

Passa il mouse per copiare qualsiasi valore hex e riutilizzarlo nella tua interfaccia.

Sfumature

0–100%
0%#B6CEE2
10%#99BBD6
20%#7CA7CB
30%#5F94BF
40%#4680AF
50%#3A6A92
60%#2F5575
70%#234058
80%#172B3A
90%#0C151D
100%#000000

Tinte

0–100%
0%#B6CEE2
10%#BDD3E5
20%#C5D8E8
30%#CCDDEB
40%#D3E2EE
50%#DBE7F0
60%#E2EBF3
70%#E9F0F6
80%#F0F5F9
90%#F8FAFC
100%#FFFFFF

Casi d'uso comuni

  • Stati dei componenti UI (hover, attivo, disabilitato)
  • Creazione di profondità con ombre e luci
  • Costruzione di sistemi di colore coerenti

Sistema di design

Suggerimento per il sistema di design

Queste variazioni costituiscono la base di una palette coesa. Esportale per mantenere allineati marketing, prodotto e ingegneria.

Esporta palette

Armonie di colore

Crea istantaneamente palette equilibrate con armonie generate da #B6CEE2.

Clicca su qualsiasi campione per aprire la sua pagina di dettaglio e continuare l'esplorazione.

Come usare

Scegli un colore dominante, quindi lascia che le tonalità di supporto agiscano come accenti per tipografia, superfici e pulsanti di invito all'azione.

Perché è importante

Le armonie equilibrate comunicano l'intento—calma, energia, qualità premium—senza sovraccaricare il layout.

Complementare

Tonalità opposte che creano impatto e contrasto audace.

Ideale per

CTA ad alto impatto, loghi e sezioni hero

Analoga

Tonalità vicine per gradienti naturali e fluidi.

Ideale per

Dashboard rilassanti e ispirate alla natura

Triadica

Tre tonalità equidistanti per un equilibrio giocoso.

Ideale per

Branding giocoso e layout editoriali

Tetradica

Due coppie complementari che offrono una ricca varietà.

Ideale per

Illustrazioni ed esperimenti di marketing

Monocromatica

Tonalità sorelle più chiare e più scure all'interno della stessa famiglia di colori.

Ideale per

Interfacce minimaliste e stati UI premium

Contrasto di accessibilità

Verifica la leggibilità di #B6CEE2 con i colori di testo comuni in modo che ogni visitatore goda di un'esperienza chiara.

Usa AA come base per il corpo del testo e AAA per un'accessibilità premium.

Testo di esempio su testo nero
Colore testo#000000
Sfondo#B6CEE2
Rapporto di contrasto12.92:1
Livello WCAGAAA
Testo di esempio su testo bianco
Colore testo#FFFFFF
Sfondo#B6CEE2
Rapporto di contrasto1.63:1
Livello WCAGFail
Anteprima testo consigliata
Colore testo#000000
Sfondo#B6CEE2
Rapporto di contrasto12.92:1
Livello WCAGAAA

Formati Tecnici

Sblocca spazi colore professionali come XYZ, LAB, varianti CMYK e profili pronti per l'esportazione.

Iscriviti gratuitamente

Formati Pratici

Ottieni simulazioni di stampa, mappature LED e ordini di byte pronti per gli sviluppatori.

Iscriviti gratuitamente

Analisi Colore

Immergiti nei dati spettrali, nei rapporti di dominanza e nelle analisi avanzate.

Iscriviti gratuitamente

Simulatore Cecità

Anteprima di come appare #B6CEE2 nelle comuni deficienze della visione dei colori.

Iscriviti gratuitamente

Aspetti Creativi

Esplora associazioni stagionali, segnali emotivi e occorrenze naturali.

Iscriviti gratuitamente

Guida al design

Equilibrio

Tratta #B6CEE2 come un elemento in evidenza. Abbinalo a colori neutri e a una tonalità di supporto per evitare il sovraccarico visivo.

Contrasto

Testa le combinazioni con contenuti reali. Un contrasto più elevato migliora la scansione, la leggibilità e le conversioni.

Armonia

Usa tinte più chiare per le superfici, il colore base per gli elementi primari e sfumature più scure per gli stati hover o premuti.

Hai bisogno di un altro colore?

Torna al selettore di colori per caricare immagini, generare palette ed esplorare nuove relazioni cromatiche.

Apri selettore di colori