عرض مصدر ReactNative/colors

<noinclude>{{DISPLAYTITLE:الألوان في React Native}}</noinclude>
تُنسَّق المكونات في React Native [[ReactNative/style|باستخدام JavaScript]]. تتوافق خاصيات الألوان عادة مع [[CSS/color|كيفية عمل CSS على الويب.]]

== واجهات الألوان البرمجية (Color APIs) ==
في React Native عدة واجهات برمجة تطبيقات للألوان صممت للسماح لك بالاستفادة الكاملة من تصميم نظامك الأساسي وتفضيلات المستخدم.

* [https://reactnative.dev/docs/platformcolor PlatformColor]: يتيح لك الرجوع إلى نظام ألوان النظام الأساسي.
* [https://reactnative.dev/docs/dynamiccolorios DynamicColorIOS]: خاص بنظام iOS يسمح لك بتحديد الألوان التي يجب استخدامها في الوضع الفاتح أو الداكن.

== تمثيل الألوان ==

===نظام RGB: أحمر-أخضر-أزرق (red-green-blue)===
يدعم React Native تحديد الألوان في نظام الألوان RGB عبر الرموز الست عشرية (hexadecimal) أو عبر الطريقة الداليّة (functional) باستعمال الدالة ‎‎<code>rgb()‎</code>‎‎ والدالة ‎‎<code>rgba()</code>‎‎:
* ‎<code>'#‎‎f0f'</code> ‎‏(‎#‎rgb‎)‎‎
* ‎‎<code>'#ff00ff'</code> ‎‏(‎#rrggbb)‎
*<code>'‎#f0ff'</code> ‏(‎#rgba)
*<code>'‎#ff00ff00'</code> ‏(‎#rrggbbaa)
* <code>'rgb(255, 0, 255)'</code>     
* <code>'rgba(255, 0, 255, 1.0)'</code>

===نظام HSL: الصبغة-التشبع-الإضاءة (Hue-saturation-lightness)===
تدعم React Native تحديد اللون في نظام الألوان HSL بالطريقة الدالية عبر الدالة ‎‎<code>hsl()</code>‎‎ والدالة ‎‎<code>hsla()</code>‎‎:
* ‎‎<code>'hsl(360, 100%, 100%)'</code>‎‎
* ‎‎<code>'hsla(360, 100%, 100%, 1.0)'</code>‎‎

=== أرقام الألوان (color ints) ===
تدعم React Native الألوان كقيم رقمية int (في نظام ألوان RGB):

* <code>0xff00ff00</code> ‏(0xrrggbbaa)

لاحظ أن هذا قد يبدو مشابهًا [https://developer.android.com/reference/android/graphics/Color لأرقام الألوان في Android] لكن القيم في Android تخزن بنظام ألوان  SRGB أي (0xaarrggbb)

=== الألوان المسماة (Named colors) ===
يمكنك كذلك استخدام أسماء الألوان كقِيَم في React Native.

ملاحظة: تدعم React Native أسماء الألوان بالأحرف الصغيرة فقط، ولا تدعم الأسماء ذات الأحرف الكبيرة.

====‎‎<code>transparent</code>‎‎====
هذا اختصارٌ لــ ‎‎<code>rgba(0,0,0,0)</code>‎‎‎‎ تمامًا كما في [https://www.w3.org/TR/css-color-3/#transparent CSS3].
====الكلمات الأساسية للألوان====
يتّبع إطار العمل React Native تسمية الألوان واستعمالها كقيم [http://www.w3.org/TR/css3-color/#svg-color مواصفة CSS3/SVG] (تجد الألوان مع تسمياتها ضمن القسمين 4.1 و 4.3):

* <ins style="background:#f0f8ff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> aliceblue ‏(`‎#f0f8ff`)
* <ins style="background:#faebd7;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> antiquewhite ‏(`‎#faebd7`)
* <ins style="background:#00ffff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> aqua ‏(`#00ffff`)
* <ins style="background:#7fffd4;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> aquamarine ‏(`#7fffd4`)
* <ins style="background:#f0ffff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> azure ‏(`‎#f0ffff`)
* <ins style="background:#f5f5dc;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> beige ‏(`‎#f5f5dc`)
* <ins style="background:#ffe4c4;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> bisque ‏(`‎#ffe4c4`)
* <ins style="background:#000000;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> black ‏(`#000000`)
* <ins style="background:#ffebcd;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> blanchedalmond ‏(`‎#ffebcd`)
* <ins style="background:#0000ff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> blue ‏(`#0000ff`)
* <ins style="background:#8a2be2;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> blueviolet ‏(`#8a2be2`)
* <ins style="background:#a52a2a;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> brown ‏(`‎#a52a2a`)
* <ins style="background:#deb887;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> burlywood ‏(`‎#deb887`)
* <ins style="background:#5f9ea0;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> cadetblue ‏(`#5f9ea0`)
* <ins style="background:#7fff00;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> chartreuse ‏(`#7fff00`)
* <ins style="background:#d2691e;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> chocolate ‏(`‎#d2691e`)
* <ins style="background:#ff7f50;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> coral ‏(`‎#ff7f50`)
* <ins style="background:#6495ed;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> cornflowerblue ‏(`#6495ed`)
* <ins style="background:#fff8dc;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> cornsilk ‏(`‎#fff8dc`)
* <ins style="background:#dc143c;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> crimson ‏(`‎#dc143c`)
* <ins style="background:#00ffff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> cyan ‏(`#00ffff`)
* <ins style="background:#00008b;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkblue ‏(`#00008b`)
* <ins style="background:#008b8b;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkcyan ‏(`#008b8b`)
* <ins style="background:#b8860b;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkgoldenrod ‏(`‎#b8860b`)
* <ins style="background:#a9a9a9;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkgray ‏(`‎#a9a9a9`)
* <ins style="background:#006400;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkgreen ‏(`#006400`)
* <ins style="background:#a9a9a9;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkgrey ‏(`‎#a9a9a9`)
* <ins style="background:#bdb76b;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkkhaki ‏(`‎#bdb76b`)
* <ins style="background:#8b008b;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkmagenta ‏(`#8b008b`)
* <ins style="background:#556b2f;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkolivegreen ‏(`#556b2f`)
* <ins style="background:#ff8c00;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkorange ‏(`‎#ff8c00`)
* <ins style="background:#9932cc;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkorchid ‏(`#9932cc`)
* <ins style="background:#8b0000;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkred ‏(`#8b0000`)
* <ins style="background:#e9967a;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darksalmon ‏(`‎#e9967a`)
* <ins style="background:#8fbc8f;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkseagreen ‏(`#8fbc8f`)
* <ins style="background:#483d8b;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkslateblue ‏(`#483d8b`)
* <ins style="background:#2f4f4f;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkslategrey ‏(`#2f4f4f`)
* <ins style="background:#00ced1;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkturquoise ‏(`#00ced1`)
* <ins style="background:#9400d3;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> darkviolet ‏(`#9400d3`)
* <ins style="background:#ff1493;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> deeppink ‏(`‎#ff1493`)
* <ins style="background:#00bfff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> deepskyblue ‏(`#00bfff`)
* <ins style="background:#696969;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> dimgray ‏(`#696969`)
* <ins style="background:#696969;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> dimgrey ‏(`#696969`)
* <ins style="background:#1e90ff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> dodgerblue ‏(`#1e90ff`)
* <ins style="background:#b22222;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> firebrick ‏(`‎#b22222`)
* <ins style="background:#fffaf0;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> floralwhite ‏(`#fffaf0`)
* <ins style="background:#228b22;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> forestgreen ‏(`#228b22`)
* <ins style="background:#ff00ff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> fuchsia ‏(`‎#ff00ff`)
* <ins style="background:#dcdcdc;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbo"></ins> gainsboro ‏(`‎#dcdcdc`)
* <ins style="background:#f8f8ff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> ghostwhite ‏(`‎#f8f8ff`)
* <ins style="background:#ffd700;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> gold ‏(`‎#ffd700`)
* <ins style="background:#daa520;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> goldenrod ‏(`‎#daa520`)
* <ins style="background:#808080;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> gray ‏(`#808080`)
* <ins style="background:#008000;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> green ‏(`#008000`)
* <ins style="background:#adff2f;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> greenyellow ‏(`‎#adff2f`)
* <ins style="background:#808080;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> grey ‏(`#808080`)
* <ins style="background:#f0fff0;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> honeydew ‏(`‎#f0fff0`)
* <ins style="background:#ff69b4;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> hotpink ‏(`‎#ff69b4`)
* <ins style="background:#cd5c5c;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> indianred ‏(`‎#cd5c5c`)
* <ins style="background:#4b0082;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> indigo ‏(`#4b0082`)
* <ins style="background:#fffff0;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> ivory ‏(`‎#fffff0`)
* <ins style="background:#f0e68c;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> khaki ‏(`‎#f0e68c`)
* <ins style="background:#e6e6fa;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lavender ‏(`‎#e6e6fa`)
* <ins style="background:#fff0f5;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lavenderblush ‏(`‎#fff0f5`)
* <ins style="background:#7cfc00;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lawngreen ‏(`#7cfc00`)
* <ins style="background:#fffacd;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lemonchiffon ‏(`‎#fffacd`)
* <ins style="background:#add8e6;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightblue ‏(`‎#add8e6`)
* <ins style="background:#f08080;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightcoral ‏(`‎#f08080`)
* <ins style="background:#e0ffff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightcyan ‏(`‎#e0ffff`)
* <ins style="background:#fafad2;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightgoldenrodyellow ‏(`‎#fafad2`)
* <ins style="background:#d3d3d3;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightgray ‏(`‎#d3d3d3`)
* <ins style="background:#90ee90;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightgreen ‏(`#90ee90`)
* <ins style="background:#d3d3d3;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightgrey ‏(`‎#d3d3d3`)
* <ins style="background:#ffb6c1;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightpink ‏(`‎#ffb6c1`)
* <ins style="background:#ffa07a;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightsalmon ‏(`‎#ffa07a`)
* <ins style="background:#20b2aa;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightseagreen ‏(`#20b2aa`)
* <ins style="background:#87cefa;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightskyblue ‏(`#87cefa`)
* <ins style="background:#778899;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightslategrey ‏(`#778899`)
* <ins style="background:#b0c4de;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightsteelblue ‏(`‎#b0c4de`)
* <ins style="background:#ffffe0;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lightyellow ‏(`‎#ffffe0`)
* <ins style="background:#00ff00;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> lime ‏(`#00ff00`)
* <ins style="background:#32cd32;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> limegreen ‏(`#32cd32`)
* <ins style="background:#faf0e6;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> linen ‏(`‎#faf0e6`)
* <ins style="background:#ff00ff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> magenta ‏(`‎#ff00ff`)
* <ins style="background:#800000;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> maroon ‏(`#800000`)
* <ins style="background:#66cdaa;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> mediumaquamarine ‏(`#66cdaa`)
* <ins style="background:#0000cd;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> mediumblue ‏(`#0000cd`)
* <ins style="background:#ba55d3;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> mediumorchid ‏(`‎#ba55d3`)
* <ins style="background:#9370db;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> mediumpurple ‏(`#9370db`)
* <ins style="background:#3cb371;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> mediumseagreen ‏(`#3cb371`)
* <ins style="background:#7b68ee;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> mediumslateblue ‏(`#7b68ee`)
* <ins style="background:#00fa9a;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> mediumspringgreen ‏(`#00fa9a`)
* <ins style="background:#48d1cc;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> mediumturquoise ‏(`#48d1cc`)
* <ins style="background:#c71585;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> mediumvioletred ‏(`‎#c71585`)
* <ins style="background:#191970;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> midnightblue ‏(`#191970`)
* <ins style="background:#f5fffa;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> mintcream ‏(`‎#f5fffa`)
* <ins style="background:#ffe4e1;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> mistyrose ‏(`‎#ffe4e1`)
* <ins style="background:#ffe4b5;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> moccasin ‏(`‎#ffe4b5`)
* <ins style="background:#ffdead;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> navajowhite ‏(`‎#ffdead`)
* <ins style="background:#000080;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> navy ‏(`#000080`)
* <ins style="background:#fdf5e6;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> oldlace ‏(`‎#fdf5e6`)
* <ins style="background:#808000;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> olive ‏(`#808000`)
* <ins style="background:#6b8e23;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> olivedrab ‏(`#6b8e23`)
* <ins style="background:#ffa500;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> orange ‏(`‎#ffa500`)
* <ins style="background:#ff4500;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> orangered ‏(`‎#ff4500`)
* <ins style="background:#da70d6;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> orchid ‏(`‎#da70d6`)
* <ins style="background:#eee8aa;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> palegoldenrod ‏(`‎#eee8aa`)
* <ins style="background:#98fb98;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> palegreen ‏(`#98fb98`)
* <ins style="background:#afeeee;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> paleturquoise ‏(`‎#afeeee`)
* <ins style="background:#db7093;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> palevioletred ‏(`‎#db7093`)
* <ins style="background:#ffefd5;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> papayawhip ‏(`‎#ffefd5`)
* <ins style="background:#ffdab9;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> peachpuff ‏(`‎#ffdab9`)
* <ins style="background:#cd853f;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> peru ‏(`‎#cd853f`)
* <ins style="background:#ffc0cb;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> pink ‏(`‎#ffc0cb`)
* <ins style="background:#dda0dd;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> plum ‏(`‎#dda0dd`)
* <ins style="background:#b0e0e6;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> powderblue ‏(`#b0e0e6`)
* <ins style="background:#800080;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> purple ‏(`#800080`)
* <ins style="background:#663399;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> rebeccapurple ‏(`#663399`)
* <ins style="background:#ff0000;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> red ‏(`‎#ff0000`)
* <ins style="background:#bc8f8f;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> rosybrown ‏(`‎#bc8f8f`)
* <ins style="background:#4169e1;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> royalblue ‏(`#4169e1`)
* <ins style="background:#8b4513;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> saddlebrown ‏(`#8b4513`)
* <ins style="background:#fa8072;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> salmon ‏(`‎#fa8072`)
* <ins style="background:#f4a460;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> sandybrown ‏(`‎#f4a460`)
* <ins style="background:#2e8b57;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> seagreen ‏(`#2e8b57`)
* <ins style="background:#fff5ee;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> seashell ‏(`‎#fff5ee`)
* <ins style="background:#a0522d;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> sienna ‏(`‎#a0522d`)
* <ins style="background:#c0c0c0;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> silver ‏(`‎#c0c0c0`)
* <ins style="background:#87ceeb;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> skyblue ‏(`#87ceeb`)
* <ins style="background:#6a5acd;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> slateblue ‏(`#6a5acd`)
* <ins style="background:#708090;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> slategray ‏(`#708090`)
* <ins style="background:#fffafa;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> snow ‏(`‎#fffafa`)
* <ins style="background:#00ff7f;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> springgreen ‏(`#00ff7f`)
* <ins style="background:#4682b4;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> steelblue ‏(`#4682b4`)
* <ins style="background:#d2b48c;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> tan ‏(`‎#d2b48c`)
* <ins style="background:#008080;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> teal ‏(`#008080`)
* <ins style="background:#d8bfd8;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> thistle ‏(`‎#d8bfd8`)
* <ins style="background:#ff6347;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> tomato ‏(`‎#ff6347`)
* <ins style="background:#40e0d0;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> turquoise ‏(`#40e0d0`)
* <ins style="background:#ee82ee;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> violet ‏(`‎#ee82ee`)
* <ins style="background:#f5deb3;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> wheat ‏(`‎#f5deb3`)
* <ins style="background:#ffffff;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> white ‏(`‎#ffffff`)
* <ins style="background:#f5f5f5;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> whitesmoke ‏(`‎#f5f5f5`)
* <ins style="background:#ffff00;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> yellow ‏(`‎#ffff00`)
* <ins style="background:#9acd32;width: 10px;height: 10px;border: .05rem solid black;border-radius: 3px;float: right;height: 24px;margin: 2px 0 0 8px;width: 24px;" class="colorbox"></ins> yellowgreen ‏(`#9acd32`)

== مصادر ==
* [https://facebook.github.io/react-native/docs/colors صفحة Color Reference في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Docs]]