کد رنگ HEX به زبان ساده: #RRGGBB چطور کار میکند
یک کد رنگ HEX مثل #1e90ff سه جفت رقم شانزدهشانزدهی است: میزان نور قرمز، سبز و آبی، هر کدام از 00 (هیچ) تا ff (کامل، یعنی 255). با یک جفت چهارم کدری را تعیین میکنید: 80 یعنی حدود 50% و ff یعنی کاملاً مات.
6 دقیقه مطالعه
کد رنگ HEX چطور کار میکند
هر رنگی روی صفحهنمایش از ترکیب نور قرمز، سبز و آبی ساخته میشود. کد HEX شدت هر نور را با دو کاراکتر بعد از علامت # مینویسد: اول قرمز، بعد سبز و بعد آبی. الگوی #RRGGBB همین است.
این کاراکترها شانزدهشانزدهی (هگزادسیمال) هستند، یعنی روشی برای شمردن با 16 رقم: 0 تا 9 و بعد a (10)، b (11)، c (12)، d (13)، e (14) و f (15). هر جفت 256 مقدار را پوشش میدهد، از 00 (0) تا ff (255)، درست همان بازه rgb().
برای تبدیل یک جفت به عدد معمولی، رقم اول را در 16 ضرب کنید و رقم دوم را به آن اضافه کنید. در زیر #1e90ff، یعنی رنگ dodgerblue در CSS، را در چهار فرمت و بعد جفتبهجفت محاسبهشده میبینید.
| فرمت | مقدار |
|---|---|
| HEX | |
| RGB | |
| HSL | |
| OKLCH |
| جفت | کانال | محاسبه | مقدار |
|---|---|---|---|
| 1e | قرمز | 1 × 16 + 14 | 30 |
| 90 | سبز | 9 × 16 + 0 | 144 |
| ff | آبی | 15 × 16 + 15 | 255 |
پس #1e90ff همان rgb(30, 144, 255) است: کمی قرمز، مقدار خوبی سبز و آبی کامل که روی هم یک آبی آسمانی روشن میسازند. سه جفت با 256 مقدار، 16,777,216 رنگ ممکن به دست میدهند.
شکل کوتاه HEX سهرقمی و چهاررقمی
وقتی دو رقم هر جفت یکسان باشند، میتوانید هر جفت را یک بار بنویسید. #ffcc00 میشود #fc0 و مرورگر هر رقم را دوباره تکرار میکند. #1e90ff شکل کوتاه ندارد، چون 1e و 90 جفت تکراری نیستند.
شکل کوتاه فقط 4,096 رنگ از 16.7 میلیون رنگ را پوشش میدهد. نسخه چهاررقمی به همین روش کدری را اضافه میکند، پس #f008 یعنی #ff000088.
| کوتاه | کامل | رنگ |
|---|---|---|
| #fff | #ffffff | سفید |
| #000 | #000000 | سیاه |
| #f00 | #ff0000 | قرمز |
| #fc0 | #ffcc00 | زرد گرم |
| #abc | #aabbcc | آبی مایل به خاکستری |
| #f008 | #ff000088 | قرمز با کدری 53% |
شفافیت در HEX: کد HEX هشترقمی با آلفا
کد هشترقمی یک جفت چهارم برای آلفا، یعنی میزان کدری (opacity)، اضافه میکند: #RRGGBBAA. 00 کاملاً شفاف است و ff کاملاً مات. همه مرورگرهای امروزی در CSS از آن و از شکل کوتاه چهاررقمی #RGBA پشتیبانی میکنند.
برای به دست آوردن جفت، کدری را در 255 ضرب کنید، به نزدیکترین عدد صحیح گرد کنید و به HEX تبدیل کنید. 50% میشود 127.5 که به 128 گرد میشود و بهصورت 80 نوشته میشود. جدول کامل را روی #1e90ff در زیر میبینید.
| کدری | آلفا (0–255) | جفت HEX | #1e90ff با آلفا |
|---|---|---|---|
| 100% | 255 | ff | #1e90ffff |
| 95% | 242 | f2 | #1e90fff2 |
| 90% | 230 | e6 | #1e90ffe6 |
| 85% | 217 | d9 | #1e90ffd9 |
| 80% | 204 | cc | #1e90ffcc |
| 75% | 191 | bf | #1e90ffbf |
| 70% | 179 | b3 | #1e90ffb3 |
| 65% | 166 | a6 | #1e90ffa6 |
| 60% | 153 | 99 | #1e90ff99 |
| 55% | 140 | 8c | #1e90ff8c |
| 50% | 128 | 80 | #1e90ff80 |
| 45% | 115 | 73 | #1e90ff73 |
| 40% | 102 | 66 | #1e90ff66 |
| 35% | 89 | 59 | #1e90ff59 |
| 30% | 77 | 4d | #1e90ff4d |
| 25% | 64 | 40 | #1e90ff40 |
| 20% | 51 | 33 | #1e90ff33 |
| 15% | 38 | 26 | #1e90ff26 |
| 10% | 26 | 1a | #1e90ff1a |
| 5% | 13 | 0d | #1e90ff0d |
| 0% | 0 | 00 | #1e90ff00 |
CSS
.overlay {
background: #00000080;
}
.overlay-same {
background: rgb(0 0 0 / 50%);
}دو نکته ظریف. اول، 80 یعنی 128 از 255 که میشود 50.2%، نه دقیقاً 50%: آلفای HEX فقط 256 پله دارد، پس بیشتر درصدهای رُند فقط تقریب نزدیکی هستند. دوم، Android آلفا را اول میگذارد. در یک فایل منبع رنگ Android، #801e90ff همان معنای #1e90ff80 در CSS را دارد.
چطور کد HEX را با چشم بخوانیم
بدون هیچ تبدیلی هم میتوانید رنگ را حدس بزنید. به رقم اول هر جفت نگاه کنید، چون تقریباً همه اطلاعات در آن است.
| نام در CSS | HEX | RGB | چطور بخوانیم |
|---|---|---|---|
| tomato | #ff6347 | 255, 99, 71 | قرمز کامل، کمی سبز و آبی: قرمز روشن گرم |
| gold | #ffd700 | 255, 215, 0 | قرمز و سبز بالا، بدون آبی: زرد |
| chocolate | #d2691e | 210, 105, 30 | قرمز جلوتر، سبز نصف، آبی کم: قهوهای نارنجی |
| darkturquoise | #00ced1 | 0, 206, 209 | سبز و آبی بالا، بدون قرمز: فیروزهای |
| dodgerblue | #1e90ff | 30, 144, 255 | آبی جلوتر، سبز در میانه: آبی آسمانی |
| mediumorchid | #ba55d3 | 186, 85, 211 | قرمز و آبی بالا، سبز کم: بنفش |
| teal | #008080 | 0, 128, 128 | سبز و آبی در نصف: فیروزهای تیره |
| navy | #000080 | 0, 0, 128 | فقط آبی، در نصف: آبی تیره |
| slategray | #708090 | 112, 128, 144 | تقریباً برابر، آبی کمی جلوتر: خاکستری مایل به آبی |
- بزرگترین رقم اول، نور غالب را نشان میدهد. #d2691e در قرمز d، در سبز 6 و در آبی 1 دارد، پس یک قهوهای نارنجی است.
- دو کانال بالا با هم ترکیب میشوند: قرمز و سبز زرد میسازند، سبز و آبی فیروزهای و قرمز و آبی سرخابی یا بنفش.
- سه جفت برابر یک خاکستری میسازند. #333333 خاکستری تیره است و #999999 خاکستری روشن. جفتهای تقریباً برابر، مثل #708090، رنگی ملایم و مایل به خاکستری میدهند.
- رقمهای بالا در کل یعنی رنگ روشن و رقمهای پایین یعنی رنگ تیره. وقتی هر سه جفت c0 یا بالاتر باشند، رنگ کمرنگ است. وقتی هر سه 30 یا پایینتر باشند، رنگ خیلی تیره است.
- سبز با عدد یکسان خیلی روشنتر از آبی دیده میشود. روشنایی OKLCH برای #00ff00 برابر 0.866 است و برای #0000ff فقط 0.452.
چرا #808080 خاکستری میانی نیست
#808080 از نظر عددی دقیقاً وسط است: 128 از 255 در هر کانال. اما به چشم در نیمه راه سیاه و سفید دیده نمیشود. روشنایی OKLCH آن 0.600 است، پس 60% از مسیر تا سفید به نظر میرسد.
مقدارهای HEX از قبل با منحنی sRGB کدگذاری شدهاند که تقریباً از چشم پیروی میکند، اما نه دقیقاً. #808080 حدود 21.6% نور سفید را ساطع میکند و مدلهای ادراکی نقطه میانی دیداری را پایینتر میگذارند: OKLCH روی #636363 و CIELAB روی #777777.
| خاکستری | چیست | OKLCH L | کنتراست روی سفید | کنتراست روی سیاه |
|---|---|---|---|---|
| #808080 | وسط عددی، 128 | 0.600 | 3.95:1 | 5.32:1 |
| #777777 | وسط CIELAB، L* 50 | 0.569 | 4.48:1 | 4.69:1 |
| #767676 | روشنترین خاکستری با 4.5:1 روی سفید | 0.566 | 4.54:1 | 4.62:1 |
| #636363 | وسط OKLCH، L 0.5 | 0.500 | 6.01:1 | 3.50:1 |
این موضوع برای متن مهم است. خاکستری #808080 روی سفید 3.95:1 است و برای متن اصلی در WCAG AA رد میشود. #767676 روشنترین خاکستری است که 4.5:1 را پاس میکند و #777777، فقط یک پله روشنتر، با 4.48:1 رد میشود.
حروف بزرگ یا کوچک، با # یا بدون آن
کدهای HEX به بزرگی و کوچکی حروف حساس نیستند. #1E90FF، #1e90ff و #1E90ff در CSS، SVG و ابزارهای طراحی یک رنگ هستند. یک سبک را انتخاب کنید و همه جا همان را نگه دارید تا جستوجو در کد همه موارد استفاده را پیدا کند. در CSS حروف کوچک انتخاب رایج است.
علامت # بخشی از سینتکس CSS است، نه بخشی از رنگ. Figma و بسیاری از ابزارهای طراحی کد را بدون آن نشان میدهند و زبانهای برنامهنویسی اغلب آن را بهصورت عدد با پیشوند 0x مینویسند، مثل Flutter که در آن Color(0xFF1E90FF) با جفت آلفا شروع میشود.
چطور کد HEX یک رنگ را روی صفحه پیدا کنیم
از قطرهچکان استفاده کنید: ابزاری که رنگ زیر نشانگر ماوس را میخواند و کدش را نشان میدهد. این ابزارها رایگاناند و بیشترشان از قبل نصب شدهاند.
- Chrome و Edge: با F12 ابزار DevTools را باز کنید، روی یکی از مربعهای رنگ در پنل Styles کلیک کنید و با آیکون قطرهچکان از صفحه رنگ بردارید.
- PickShade: انتخابگر رنگ در صفحه اصلی در Chrome و Edge یک دکمه قطرهچکان دارد که از هر جای صفحهنمایش رنگ برمیدارد.
- ویندوز: Microsoft PowerToys را نصب کنید و با Win + Shift + C ابزار Color Picker را باز کنید.
- macOS: برنامه Digital Color Meter را از Applications، Utilities باز کنید. آن را روی sRGB بگذارید و بعد View، Display Values، as Hexadecimal را انتخاب کنید.
- Figma، Photoshop و بیشتر برنامههای طراحی: برای قطرهچکان کلید I را بزنید.
- در عکس یا اسکرینشات: آن را در انتخابگر رنگ از تصویر باز کنید و روی هر پیکسلی کلیک کنید. تصویر روی دستگاه خودتان میماند.
مقدار برداشتهشده ممکن است چند واحد با مقدار اصلی فرق داشته باشد، چون صفحهنمایشها پروفایل رنگ اعمال میکنند و تصاویر فشرده میشوند. وقتی مقدار دقیق را لازم دارید، آن را از فایل طراحی یا CSS کپی کنید، نه از اسکرینشات.
پرسش و پاسخ
کد رنگ HEX چیست؟
کد رنگ HEX یک کد ششرقمی مثل #1e90ff است که رنگ را با میزان نور قرمز، سبز و آبی آن توصیف میکند. هر جفت رقم شانزدهشانزدهی از 00 (0) تا ff (255) است، پس #1e90ff همان rgb(30, 144, 255) است.
چطور به رنگ HEX شفافیت اضافه کنم؟
یک جفت رقم چهارم به آخر اضافه کنید: #RRGGBBAA. کدری را در 255 ضرب کنید، گرد کنید و به HEX تبدیل کنید، پس 50% میشود 80، 25% میشود 40 و 75% میشود bf. برای مثال #1e90ff80 همان dodgerblue با کدری حدود 50% است.
کدری 50% در HEX چند است؟
کدری 50% در HEX 80 است، مثل #00000080 برای سیاه نیمهشفاف. 80 برابر 128 از 255 است، یعنی 50.2%، چون آلفای HEX 256 پله دارد و 50% دقیق بین 7f و 80 میافتد.
فرق HEX و RGB چیست؟
در خود رنگ هیچ فرقی نیست، فقط در شیوه نوشتن. HEX مقدار قرمز، سبز و آبی را بهصورت جفتهایی در مبنای 16 مینویسد و rgb() بهصورت عددهای دهدهی از 0 تا 255، پس #ff6347 و rgb(255, 99, 71) همان قرمز گوجهای هستند.
آیا کد رنگ HEX به بزرگی و کوچکی حروف حساس است؟
نه. #FF6347، #ff6347 و #Ff6347 در CSS، HTML، SVG و ابزارهای طراحی یک رنگ هستند. بیشتر پروژههای CSS از حروف کوچک استفاده میکنند، اما هر سبکی درست است به شرط اینکه یکدست باشد.
کد HEX خاکستری میانی چیست؟
#808080 وسط عددی است، اما با روشنایی OKLCH برابر 0.600 روشنتر از نیمه راه دیده میشود. خاکستریای که به چشم دقیقاً بین سیاه و سفید باشد، بین #636363 (OKLCH L 0.5) و #777777 (CIELAB L* 50) قرار دارد.