# کد رنگ HEX به زبان ساده: #RRGGBB چطور کار می‌کند

یک کد رنگ HEX مثل #1e90ff سه جفت رقم شانزده‌شانزدهی است: میزان نور قرمز، سبز و آبی، هر کدام از 00 (هیچ) تا ff (کامل، یعنی 255). با یک جفت چهارم کدری را تعیین می‌کنید: 80 یعنی حدود 50% و ff یعنی کاملاً مات.

منبع: https://pickshade.com/fa/hex-color-codes
به‌روزرسانی: 2026-09-28

## کد رنگ 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 | #1e90ff |
| RGB | rgb(30 144 255) |
| HSL | hsl(209.6 100% 55.88%) |
| OKLCH | oklch(65.201% 0.19012 253.205) |

| جفت | کانال | محاسبه | مقدار |
| --- | --- | --- | --- |
| 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) قرار دارد.

## ابزارها

- [مبدل HEX به RGB](https://pickshade.com/fa/convert/hex-to-rgb)
- [انتخابگر رنگ با قطره‌چکان](https://pickshade.com/fa)
- [برداشتن رنگ از تصویر](https://pickshade.com/fa/image)
- [رنگ‌های نام‌دار CSS](https://pickshade.com/fa/css-colors)

## راهنماهای مرتبط

- [فرمت‌های رنگ به زبان ساده: HEX، RGB، HSL، OKLCH و بقیه](https://pickshade.com/fa/color-formats)
- [OKLCH به زبان ساده: فرمت رنگی که بالاخره با چشم شما هماهنگ است](https://pickshade.com/fa/oklch)
- [APCA در برابر WCAG 2: به کدام بررسی کنتراست اعتماد کنیم](https://pickshade.com/fa/apca-vs-wcag)