Színpaletták / Márkaszínek / Tailwind CSS
MÁRKAARCULAT · FEJLESZTÉS
Tailwind CSS színei és HEX-kódjai
Tailwind CSS ismert színreferenciái #06B6D4, #0F172A, #FFFFFF. A színek közötti hangsúlykülönbség meghatározza a vizuális karaktert.
3 árnyalat · Kattints egy színre a HEX másolásához
A Tailwind CSS színrendszerének értelmezése
A Tailwind CSS kapcsán gyakran idézett, ismert márkaszín-referenciákat elemezzük. Ez nem ellenőrzött, teljes arculati kézikönyv.
A megadott színek átlagos telítettsége 47%, az átlagos világosságuk 51,3%. Ezek a számok a márka bemutatott árnyalatainak egymáshoz viszonyított karakterét írják le, nem egy új paletta minősítései.
SZÍNPROFIL / TAILWIND CSS
Mit mutat ez a konkrét paletta?
A következő megállapítások a 3 bemutatott HEX-kód alapján készültek. Minden márkánál a tényleges árnyalatokat és kiszámított kontrasztokat vizsgáljuk.
3 szín
Első minta: #06B6D4
Hangulat: inkább hűvös
2/3 AA színpár
01 · SZÍNÖSSZETÉTEL
türkiz nyitószín · inkább hűvös színvilág
A Tailwind CSS 3 bemutatott színe közül a #06B6D4 türkiz karakterű. A legsötétebb (#0F172A) és legvilágosabb (#FFFFFF) árnyalat között 89 százalékpontos HSL-világossági különbség látható. A színkészlet inkább hűvös összhatást ad.
02 · OLVASHATÓSÁG
Mért kontraszt
A #0F172A és #FFFFFF páros 17.85:1 kontrasztot ad, ezért a színkódok számított aránya alapján normál szöveghez eléri a WCAG AA 4,5:1 küszöböt. A vizsgált 3 eltérő párból 2 felel meg.
03 · WEBES ALKALMAZÁS
Használati javaslat
Kísérleti webes alkalmazásnál a #06B6D4 lehet kiemelőszín-jelölt. A #06B6D4 hátteren a #111111 szöveg 7.78:1 arányt ad, így normál szövegre AA-szintű. Ezek technikai javaslatok, nem a márka jóváhagyott használati szabályai.
Tailwind CSS márkaszínek részletesen
HEX, RGB és HSL értékek a bemutatott arculati referenciákhoz.
Szín 1 · Elsődleges referencia
#06B6D4
RGB 6, 182, 212
HSL 189°, 94%, 43%
Szín 2 · Második arculati szín
#0F172A
RGB 15, 23, 42
HSL 222°, 47%, 11%
Szín 3 · Kiegészítő árnyalat
#FFFFFF
RGB 255, 255, 255
HSL 0°, 0%, 100%
A színek megjelenése egy felületen
A márkához társított színértékekből készített szemléltető weboldal-előnézet. A vállalat tényleges felületét és színhasználati szabályait nem helyettesíti.
MÁRKASZÍN · DEMÓ
Színalkalmazási példa
Arculati színek webes környezetben
Mit mutatnak a Tailwind CSS színei?
Az előnézet a bemutatott HEX-kódokból készült. Szemléltető UI-minta, nem a cég eredeti weboldala.
Sötét felület
Színek szerepben
Háttér, kiemelés, tipográfia – eltérő kontrasztigénnyel.
Kontraszt és olvashatóság
A felsorolt színértékek között a legnagyobb számított kontraszt 17,9:1; a vizsgált, különböző színekből álló irányított párok közül 4/6 felel meg a normál szövegre vonatkozó WCAG AA 4,5:1 küszöbnek. Ez a színkódokra végzett mérés, nem az adott cég weboldalának akadálymentességi auditja.
#06B6D4
Fehér 2.43 · Fekete 8.65
AA normál szöveg: fehér nem felel meg · fekete megfelel
#0F172A
Fehér 17.85 · Fekete 1.18
AA normál szöveg: fehér megfelel · fekete nem felel meg
#FFFFFF
Fehér 1.00 · Fekete 21.00
AA normál szöveg: fehér nem felel meg · fekete megfelel
Színpárok kontrasztja
Az itt szereplő színek egymással való kombinációját is megvizsgálhatod. Ez különösen a szövegek és a gombok olvashatóságánál számít.
#0F172A / #FFFFFF
17.85:1 · AA igen
#FFFFFF / #0F172A
17.85:1 · AA igen
#06B6D4 / #0F172A
7.35:1 · AA igen
#0F172A / #06B6D4
7.35:1 · AA igen
Teljes színkontraszt-mátrix
A Tailwind CSS felsorolt színkódjainak minden kombinációja, számszerű WCAG-arányokkal. Az AA minősítés normál szövegre értendő (legalább 4,5:1).
| Háttér / szöveg | #06B6D4 | #0F172A | #FFFFFF |
|---|---|---|---|
| #06B6D4 | 1.00 | 7.35 AA | 2.43 |
| #0F172A | 7.35 AA | 1.00 | 17.85 AA |
| #FFFFFF | 2.43 | 17.85 AA | 1.00 |
Színhierarchia és vizuális szerepek
Az alábbi felosztás a felsorolt arculati színek webes értelmezése. Nem állítja, hogy a Tailwind CSS saját design systemje ugyanezeket a szerepneveket használja.
Első bemutatott márkaszín
#06B6D4
A márkához kapcsolt első, jellegzetes árnyalat.
Világos felületek
#FFFFFF
Világos kontextus a képernyőn és nyomtatott mintában.
Sötét felületek
#0F172A
Kontrasztalap sötét megjelenítéshez.
Színlátási szimuláció
Tájékoztató közelítés különböző színlátási eltérésekhez. Nem helyettesíti a valódi akadálymentességi tesztet.
Eredeti
Protanopia – pirosérzékelés
Deuteranopia – zöldérzékelés
Tritanopia – kékérzékelés
CSS-színváltozók
A márka színreferenciáit fejlesztéshez exportálhatod.
:root {
--tailwind-css-1: #06B6D4;
--tailwind-css-2: #0F172A;
--tailwind-css-3: #FFFFFF;
}Elemzés: a bemutatott színek
Tailwind CSS ismert színreferenciái #06B6D4, #0F172A, #FFFFFF. A színek közötti hangsúlykülönbség meghatározza a vizuális karaktert.
A megadott színek átlagos telítettsége 47%, az átlagos világosságuk 51,3%. Ezek a számok a márka bemutatott árnyalatainak egymáshoz viszonyított karakterét írják le, nem egy új paletta minősítései.
A felsorolt színértékek között a legnagyobb számított kontraszt 17,9:1; a vizsgált, különböző színekből álló irányított párok közül 4/6 felel meg a normál szövegre vonatkozó WCAG AA 4,5:1 küszöbnek. Ez a színkódokra végzett mérés, nem az adott cég weboldalának akadálymentességi auditja.
A mért értékek a kiválasztott színek viszonyait írják le; nem minősítjük a vállalat arculatának minőségét egyetlen pontszámmal.
Forrás és adatpontosság
Közismert arculati referencia, nem hivatalosan auditált teljes márkapaletta. A Tailwind CSS kapcsán gyakran idézett, ismert márkaszín-referenciákat elemezzük. Ez nem ellenőrzött, teljes arculati kézikönyv.
A színkódok oktatási és elemzési célú bemutatása nem jelent márkapartnerséget vagy védjegyhasználati engedélyt.
Színadatok forrásának megnyitásaGyakori kérdések a Tailwind CSS színeiről
Milyen színeket használ a Tailwind CSS?
Az itt dokumentált vagy elérhető referenciákban szereplő színek: #06B6D4, #0F172A, #FFFFFF. A pontos alkalmazási kör a megjelölt forrástól függ.
Mi a Tailwind CSS színeinek HEX-kódja?
A felsorolt HEX-kódok: #06B6D4, #0F172A, #FFFFFF. Mindegyik külön másolható, RGB és HSL formában is megjelenik.
Hogyan ellenőrizhető a Tailwind CSS színeinek kontrasztja?
A lenti színpárok WCAG-kontrasztaránya számított adat. A normál szövegre vonatkozó AA határérték 4,5:1. A mérés nem teljes weboldal-audit.
Hivatalos a Tailwind CSS színpaletta?
A Tailwind CSS kapcsán gyakran idézett, ismert márkaszín-referenciákat elemezzük. Ez nem ellenőrzött, teljes arculati kézikönyv.
További márkák színei
További színrendszerek: színpaletta-katalógus és színelemző.