מחולל קוד צבע & Selector de color

צור קודי צבע, וריאציות, הרמוניות, ובדוק יחסי ניגודיות.

המרת צבע

HEX

#c3bfc1

Pale Slate

HEX
#c3bfc1
HSL
330, 3, 76
RGB
195, 191, 193
XYZ
51, 53, 58
CMYK
0, 2, 1, 24
LUV
78,15,4
LAB
78, 2, -1
HWB
330, 75, 24

וריאציות

מטרת החלק הזה היא לייצר במדויק גוונים בהירים (הוספת לבן טהור) וגוונים כהים (הוספת שחור טהור) של הצבע שבחרת במדרגות של 10%.

טיפ מקצועי: השתמש בגוונים כהים למצבי ריחוף וצללים, בגוונים בהירים להדגשות ורקעים.

גוונים כהים

וריאציות כהות יותר שנוצרו על ידי הוספת שחור לצבע הבסיס שלך.

גוונים בהירים

וריאציות בהירות יותר שנוצרו על ידי הוספת לבן לצבע הבסיס שלך.

שימושים נפוצים

  • מצבי רכיבי UI (ריחוף, פעיל, מושבת)
  • יצירת עומק עם צללים והדגשות
  • בניית מערכות צבע עקביות

טיפ למערכת עיצוב

הווריאציות הללו מהוות את הבסיס לפלטת צבעים אחידה. ייצא אותן כדי לשמור על עקביות בכל הפרויקט שלך.

שילובי צבעים

לכל הרמוניה יש את האווירה שלה. השתמש בהרמוניות כדי להעלות רעיונות לשילובי צבעים שעובדים טוב יחד.

איך להשתמש

לחץ על כל צבע כדי להעתיק את ערך ה-hex שלו. השילובים הללו מוכחים מתמטית ליצירת הרמוניה ויזואלית.

למה זה חשוב

הרמוניות צבע יוצרות איזון ומעוררות רגשות ספציפיים בעיצובים שלך.

משלים

צבע וההפך שלו בגלגל הצבעים, +180 מעלות גוון. ניגודיות גבוהה.

#c3bfc1
הכי מתאים ל: עיצובים בעלי השפעה גבוהה, קריאות לפעולה, לוגואים

משלים מפוצל

צבע ושניים סמוכים למשלים שלו, +/-30 מעלות גוון מהערך ההפוך לצבע הראשי. נועז כמו משלים ישר, אך יותר גמיש.

הכי מתאים ל: פריסות תוססות אך מאוזנות

טריאדי

שלושה צבעים במרווחים שווים על גלגל הצבעים, כל אחד 120 מעלות גוון זה מזה. עדיף לאפשר לצבע אחד לשלוט ולהשתמש באחרים כהדגשים.

הכי מתאים ל: עיצובים שובבים ואנרגטיים

אנלוגי

שלושה צבעים בעלי אותה בהירות ורוויה עם גוונים סמוכים על גלגל הצבעים, במרחק של 30 מעלות. מעברים חלקים.

הכי מתאים ל: ממשקים בהשראת הטבע, מרגיעים

מונוכרומטי

שלושה צבעים בעלי אותו גוון עם ערכי בהירות +/-50%. עדין ומעודן.

הכי מתאים ל: עיצובים מינימליסטיים ומתוחכמים

טטרדי

שתי קבוצות של צבעים משלימים, מופרדים ב-60 מעלות גוון.

הכי מתאים ל: סכמות צבע עשירות ומגוונות

עקרונות תורת הצבעים

איזון

השתמש בצבע דומיננטי אחד, תמוך בצבע משני והדגש במידה מועטה.

ניגודיות

ודא ניגודיות מספקת לקריאות ונגישות.

הרמוניה

הצבעים צריכים לעבוד יחד כדי ליצור חוויה ויזואלית מאוחדת.

בודק ניגודיות צבע

בדוק שילובי צבעים כדי לוודא שהם עומדים בתקני הנגישות של WCAG לקריאות טקסט.

צבע טקסט
צבע רקע
ניגודיות
1.00
Fail
גרוע מאוד
טקסט קטן
✖︎
טקסט גדול
✖︎
תקני WCAG
AA:יחס ניגודיות מינימלי של 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול. נדרש לרוב האתרים.
AAA:יחס ניגודיות משופר של 7:1 לטקסט רגיל ו-4.5:1 לטקסט גדול. מומלץ לנגישות מיטבית.
ניגודיות לא מספקת לכל גדלי הטקסט - לא עומד בתקני WCAG.

בודק ניגודיות מתקדם

כוונון עדין עם מחוונים, תצוגות מקדימות מרובות ועוד

כולם גאונים. אבל אם תשפוט דג לפי יכולתו לטפס על עץ, הוא יחיה את כל חייו במחשבה שהוא טיפש.

- Albert Einstein

פורמטים טכניים

פורמטים מעשיים

ניתוח צבע

סימולטור עיוורון צבעים

היבטים יצירתיים