Színpaletták / Márkaszínek / Google
MÁRKAARCULAT · TECHNOLÓGIA
Google színei és HEX-kódjai
A Google vizuális azonosításának egyik jellegzetes eleme a kék, piros, sárga és zöld együttese. A négy hangsúlyos alapszín egymástól könnyen megkülönböztethető, és együtt is felismerhető karaktert ad.
4 árnyalat · Kattints egy színre a HEX másolásához
A Google színrendszerének értelmezése
A Google márkához dokumentált színreferenciák alapján készült elemzés látható. A forrás nem feltétlenül fed le minden terméket vagy aktuális felületet.
A megadott színek átlagos telítettsége 80%, az átlagos világosságuk 52,5%. 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 / GOOGLE
Mit mutat ez a konkrét paletta?
A következő megállapítások a 4 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.
4 szín
Első minta: #4285F4
Hangulat: inkább meleg
0/6 AA színpár
01 · SZÍNÖSSZETÉTEL
kék nyitószín · inkább meleg színvilág
A Google 4 bemutatott színe közül a #4285F4 kék karakterű. A legsötétebb (#EA4335) és legvilágosabb (#FBBC04) árnyalat között 18 százalékpontos HSL-világossági különbség látható. A színkészlet inkább meleg összhatást ad.
02 · OLVASHATÓSÁG
Mért kontraszt
A legnagyobb mért kontraszt #EA4335 és #FBBC04 között 2.30:1. Ez nem éri el a normál szövegre ajánlott 4,5:1 WCAG AA küszöböt; érdemes külön, megfelelő kontrasztú szövegszínt választani.
03 · WEBES ALKALMAZÁS
Használati javaslat
Kísérleti webes alkalmazásnál a #4285F4 lehet kiemelőszín-jelölt. A #4285F4 hátteren a #111111 szöveg 5.30: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.
Google márkaszínek részletesen
HEX, RGB és HSL értékek a bemutatott arculati referenciákhoz.
Szín 1 · Elsődleges referencia
#4285F4
RGB 66, 133, 244
HSL 217°, 89%, 61%
Szín 2 · Második arculati szín
#EA4335
RGB 234, 67, 53
HSL 5°, 81%, 56%
Szín 3 · Kiegészítő árnyalat
#FBBC04
RGB 251, 188, 4
HSL 45°, 97%, 50%
Szín 4 · Negyedik árnyalat
#34A853
RGB 52, 168, 83
HSL 136°, 53%, 43%
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 Google 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 2,3:1; a vizsgált, különböző színekből álló irányított párok közül 0/12 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.
#4285F4
Fehér 3.56 · Fekete 5.89
AA normál szöveg: fehér nem felel meg · fekete megfelel
#EA4335
Fehér 3.92 · Fekete 5.35
AA normál szöveg: fehér nem felel meg · fekete megfelel
#FBBC04
Fehér 1.71 · Fekete 12.30
AA normál szöveg: fehér nem felel meg · fekete megfelel
#34A853
Fehér 3.06 · Fekete 6.87
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.
A felsorolt színpárok között nincs AA-szintű normál szöveges kontraszt.
Teljes színkontraszt-mátrix
A Google 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 | #4285F4 | #EA4335 | #FBBC04 | #34A853 |
|---|---|---|---|---|
| #4285F4 | 1.00 | 1.10 | 2.09 | 1.17 |
| #EA4335 | 1.10 | 1.00 | 2.30 | 1.28 |
| #FBBC04 | 2.09 | 2.30 | 1.00 | 1.79 |
| #34A853 | 1.17 | 1.28 | 1.79 | 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 Google saját design systemje ugyanezeket a szerepneveket használja.
Első bemutatott márkaszín
#4285F4
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
#15181C
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 {
--google-1: #4285F4;
--google-2: #EA4335;
--google-3: #FBBC04;
--google-4: #34A853;
}Elemzés: a bemutatott színek
A Google vizuális azonosításának egyik jellegzetes eleme a kék, piros, sárga és zöld együttese. A négy hangsúlyos alapszín egymástól könnyen megkülönböztethető, és együtt is felismerhető karaktert ad.
A megadott színek átlagos telítettsége 80%, az átlagos világosságuk 52,5%. 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 2,3:1; a vizsgált, különböző színekből álló irányított párok közül 0/12 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
Hivatalos Google színdokumentáció. A Google márkához dokumentált színreferenciák alapján készült elemzés látható. A forrás nem feltétlenül fed le minden terméket vagy aktuális felületet.
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 Google színeiről
Milyen színeket használ a Google?
Az itt dokumentált vagy elérhető referenciákban szereplő színek: #4285F4, #EA4335, #FBBC04, #34A853. A pontos alkalmazási kör a megjelölt forrástól függ.
Mi a Google színeinek HEX-kódja?
A felsorolt HEX-kódok: #4285F4, #EA4335, #FBBC04, #34A853. Mindegyik külön másolható, RGB és HSL formában is megjelenik.
Hogyan ellenőrizhető a Google 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 Google színpaletta?
A Google márkához dokumentált színreferenciák alapján készült elemzés látható. A forrás nem feltétlenül fed le minden terméket vagy aktuális felületet.
További márkák színei
További színrendszerek: színpaletta-katalógus és színelemző.