Színpaletták / Márkaszínek / Figma
MÁRKAARCULAT · DESIGN
Figma színei és HEX-kódjai
A Figma több élénk árnyalatot egyesítő emblémája különböző színcsaládokból építkezik, ezért a paletta nem egyetlen domináns árnyalat köré szerveződik.
5 árnyalat · Kattints egy színre a HEX másolásához
A Figma színrendszerének értelmezése
A Figma 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 95,8%, az átlagos világosságuk 57,4%. 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 / FIGMA
Mit mutat ez a konkrét paletta?
A következő megállapítások a 5 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.
5 szín
Első minta: #F24E1E
Hangulat: inkább hűvös
0/10 AA színpár
01 · SZÍNÖSSZETÉTEL
vörös nyitószín · inkább hűvös színvilág
A Figma 5 bemutatott színe közül a #F24E1E vörös karakterű. A legsötétebb (#A259FF) és legvilágosabb (#0ACF83) árnyalat között 26 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 legnagyobb mért kontraszt #A259FF és #0ACF83 között 1.90: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 #F24E1E lehet kiemelőszín-jelölt. A #F24E1E hátteren a #111111 szöveg 5.29: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.
Figma márkaszínek részletesen
HEX, RGB és HSL értékek a bemutatott arculati referenciákhoz.
Szín 1 · Elsődleges referencia
#F24E1E
RGB 242, 78, 30
HSL 14°, 89%, 53%
Szín 2 · Második arculati szín
#FF7262
RGB 255, 114, 98
HSL 6°, 100%, 69%
Szín 3 · Kiegészítő árnyalat
#A259FF
RGB 162, 89, 255
HSL 266°, 100%, 67%
Szín 4 · Negyedik árnyalat
#1ABCFE
RGB 26, 188, 254
HSL 197°, 99%, 55%
Szín 5 · Ötödik árnyalat
#0ACF83
RGB 10, 207, 131
HSL 157°, 91%, 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 Figma 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 1,9:1; a vizsgált, különböző színekből álló irányított párok közül 0/20 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.
#F24E1E
Fehér 3.57 · Fekete 5.88
AA normál szöveg: fehér nem felel meg · fekete megfelel
#FF7262
Fehér 2.68 · Fekete 7.84
AA normál szöveg: fehér nem felel meg · fekete megfelel
#A259FF
Fehér 3.88 · Fekete 5.41
AA normál szöveg: fehér nem felel meg · fekete megfelel
#1ABCFE
Fehér 2.17 · Fekete 9.67
AA normál szöveg: fehér nem felel meg · fekete megfelel
#0ACF83
Fehér 2.05 · Fekete 10.27
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 Figma 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 | #F24E1E | #FF7262 | #A259FF | #1ABCFE | #0ACF83 |
|---|---|---|---|---|---|
| #F24E1E | 1.00 | 1.33 | 1.09 | 1.64 | 1.74 |
| #FF7262 | 1.33 | 1.00 | 1.45 | 1.23 | 1.31 |
| #A259FF | 1.09 | 1.45 | 1.00 | 1.79 | 1.90 |
| #1ABCFE | 1.64 | 1.23 | 1.79 | 1.00 | 1.06 |
| #0ACF83 | 1.74 | 1.31 | 1.90 | 1.06 | 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 Figma saját design systemje ugyanezeket a szerepneveket használja.
Első bemutatott márkaszín
#F24E1E
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 {
--figma-1: #F24E1E;
--figma-2: #FF7262;
--figma-3: #A259FF;
--figma-4: #1ABCFE;
--figma-5: #0ACF83;
}Elemzés: a bemutatott színek
A Figma több élénk árnyalatot egyesítő emblémája különböző színcsaládokból építkezik, ezért a paletta nem egyetlen domináns árnyalat köré szerveződik.
A megadott színek átlagos telítettsége 95,8%, az átlagos világosságuk 57,4%. 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 1,9:1; a vizsgált, különböző színekből álló irányított párok közül 0/20 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 Figma 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 Figma színeiről
Milyen színeket használ a Figma?
Az itt dokumentált vagy elérhető referenciákban szereplő színek: #F24E1E, #FF7262, #A259FF, #1ABCFE, #0ACF83. A pontos alkalmazási kör a megjelölt forrástól függ.
Mi a Figma színeinek HEX-kódja?
A felsorolt HEX-kódok: #F24E1E, #FF7262, #A259FF, #1ABCFE, #0ACF83. Mindegyik külön másolható, RGB és HSL formában is megjelenik.
Hogyan ellenőrizhető a Figma 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 Figma színpaletta?
A Figma 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ő.