الفرق بين المراجعتين ل"ReactNative/colors"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 2: سطر 2:
 
تُنسَّق المكونات في React Native [[ReactNative/style|باستخدام JavaScript]]. تتوافق خاصيات الألوان عادة مع [[CSS/color|كيفية عمل CSS على الويب.]]
 
تُنسَّق المكونات في React Native [[ReactNative/style|باستخدام JavaScript]]. تتوافق خاصيات الألوان عادة مع [[CSS/color|كيفية عمل CSS على الويب.]]
  
−
== واجهات برمجة التطبيقات الملونة (Color APIs) ==
+
== واجهات الألوان البرمجية (Color APIs) ==
−
في React Native عدة واجهات برمجة تطبيقات ملونة صممت للسماح لك بالاستفادة الكاملة من تصميم نظامك الأساسي وتفضيلات المستخدم.
+
في React Native عدة واجهات برمجة تطبيقات للألوان صممت للسماح لك بالاستفادة الكاملة من تصميم نظامك الأساسي وتفضيلات المستخدم.
  
 
* [https://reactnative.dev/docs/platformcolor PlatformColor]: يتيح لك الرجوع إلى نظام ألوان النظام الأساسي.
 
* [https://reactnative.dev/docs/platformcolor PlatformColor]: يتيح لك الرجوع إلى نظام ألوان النظام الأساسي.
 
* [https://reactnative.dev/docs/dynamiccolorios DynamicColorIOS]: خاص بنظام iOS يسمح لك بتحديد الألوان التي يجب استخدامها في الوضع الفاتح أو الداكن.
 
* [https://reactnative.dev/docs/dynamiccolorios DynamicColorIOS]: خاص بنظام iOS يسمح لك بتحديد الألوان التي يجب استخدامها في الوضع الفاتح أو الداكن.
  
−
==أحمر-أخضر-أزرق (Red-green-blue)==
+
== تمثيل الألوان ==
−
يدعم React Native كلا من ‎‎<code>rgb()‎</code>‎‎ و‎‎<code>rgba()</code>‎‎ بشكل الرموز السداسية العشرية (hexadecimal) والداليّة (functional):
+
 
−
* ‎<code>'#‎‎f0f'</code> ‎(#‎rgb‎)‎‎
+
===نظام RGB: أحمر-أخضر-أزرق (red-green-blue)===
−
* ‎‎<code>'#ff00ff'</code> ‎(#rrggbb)‎
+
يدعم 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>'rgb(255, 0, 255)'</code>     
 
* <code>'rgba(255, 0, 255, 1.0)'</code>
 
* <code>'rgba(255, 0, 255, 1.0)'</code>
−
* ‎<code>'#f0ff'</code> (#rgba)
 
−
* ‎<code>'#ff00ff00'</code> (#rrggbbaa)
 
  
−
==تدرج اللون وصفاؤه وإضاءته (Hue-saturation-lightness HSL)==
+
===نظام HSL: الصبغة-التشبع-الإضاءة (Hue-saturation-lightness)===
−
تحديد اللون عبر ‎‎<code>hsl()</code>‎‎ و‎‎<code>hsla()</code>‎‎ مدعوم بالطريقة الداليّة (functional):
+
تدعم React Native تحديد اللون في نظام الألوان HSL بالطريقة الدالية عبر الدالة ‎‎<code>hsl()</code>‎‎ والدالة ‎‎<code>hsla()</code>‎‎:
 
* ‎‎<code>'hsl(360, 100%, 100%)'</code>‎‎
 
* ‎‎<code>'hsl(360, 100%, 100%)'</code>‎‎
 
* ‎‎<code>'hsla(360, 100%, 100%, 1.0)'</code>‎‎
 
* ‎‎<code>'hsla(360, 100%, 100%, 1.0)'</code>‎‎
  
−
== أرقام الألوان (color ints) ==
+
=== أرقام الألوان (color ints) ===
−
تدعم React Native الألوان كقيم int (في نظام ألوان RGB):
+
تدعم React Native الألوان كقيم رقمية int (في نظام ألوان RGB):
  
−
* <code>0xff00ff00</code> (0xrrggbbaa)
+
* <code>0xff00ff00</code> ‏(0xrrggbbaa)
  
−
لاحظ أن هذا قد يبدو مشابهًا لأرقام الألوان في Android لكن القيم في Android تخزن بنظام ألوان  SRGB أي (0xaarrggbb)
+
لاحظ أن هذا قد يبدو مشابهًا [https://developer.android.com/reference/android/graphics/Color لأرقام الألوان في Android] لكن القيم في Android تخزن بنظام ألوان  SRGB أي (0xaarrggbb)
  
−
== الألوان المسماة (Named colors) ==
+
=== الألوان المسماة (Named colors) ===
 
يمكنك كذلك استخدام أسماء الألوان كقِيَم في React Native.
 
يمكنك كذلك استخدام أسماء الألوان كقِيَم في React Native.
  
 
ملاحظة: تدعم React Native أسماء الألوان بالأحرف الصغيرة فقط، ولا تدعم الأسماء ذات الأحرف الكبيرة.
 
ملاحظة: تدعم React Native أسماء الألوان بالأحرف الصغيرة فقط، ولا تدعم الأسماء ذات الأحرف الكبيرة.
  
−
===‎‎<code>transparent</code>‎‎===
+
====‎‎<code>transparent</code>‎‎====
−
هذا اختصارٌ لــ ‎‎<code>rgba(0,0,0,0)</code>‎‎‎‎ تمامًا كما في [https://www.w3.org/TR/css-color-3/#transparent CSS3]
+
هذا اختصارٌ لــ ‎‎<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]:
+
يتّبع إطار العمل React Native تسمية الألوان واستعمالها كقيم [http://www.w3.org/TR/css3-color/#svg-color مواصفة CSS3/SVG] (تجد الألوان مع تسمياتها ضمن القسمين 4.1 و 4.3):
  
−
* <ins class="color-box"></ins>aliceblue (`#f0f8ff`)
+
* <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 class="color-box"></ins>antiquewhite (`#faebd7`)
+
* <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 class="color-box"></ins>aqua (`#00ffff`)
+
* <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 class="color-box"></ins>aquamarine (`#7fffd4`)
+
* <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 class="color-box"></ins>azure (`#f0ffff`)
+
* <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 class="color-box"></ins>beige (`#f5f5dc`)
+
* <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 class="color-box"></ins>bisque (`#ffe4c4`)
+
* <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 class="color-box"></ins>black (`#000000`)
+
* <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 class="color-box"></ins>blanchedalmond (`#ffebcd`)
+
* <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 class="color-box"></ins>blue (`#0000ff`)
+
* <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 class="color-box"></ins>blueviolet (`#8a2be2`)
+
* <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 class="color-box"></ins>brown (`#a52a2a`)
+
* <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 class="color-box"></ins>burlywood (`#deb887`)
+
* <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 class="color-box"></ins>cadetblue (`#5f9ea0`)
+
* <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 class="color-box"></ins>chartreuse (`#7fff00`)
+
* <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 class="color-box"></ins>chocolate (`#d2691e`)
+
* <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 class="color-box"></ins>coral (`#ff7f50`)
+
* <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 class="color-box"></ins>cornflowerblue (`#6495ed`)
+
* <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 class="color-box"></ins>cornsilk (`#fff8dc`)
+
* <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 class="color-box"></ins>crimson (`#dc143c`)
+
* <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 class="color-box"></ins>cyan (`#00ffff`)
+
* <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 class="color-box"></ins>darkblue (`#00008b`)
+
* <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 class="color-box"></ins>darkcyan (`#008b8b`)
+
* <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 class="color-box"></ins>darkgoldenrod (`#b8860b`)
+
* <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 class="color-box"></ins>darkgray (`#a9a9a9`)
+
* <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 class="color-box"></ins>darkgreen (`#006400`)
+
* <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 class="color-box"></ins>darkgrey (`#a9a9a9`)
+
* <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 class="color-box"></ins>darkkhaki (`#bdb76b`)
+
* <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 class="color-box"></ins>darkmagenta (`#8b008b`)
+
* <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 class="color-box"></ins>darkolivegreen (`#556b2f`)
+
* <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 class="color-box"></ins>darkorange (`#ff8c00`)
+
* <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 class="color-box"></ins>darkorchid (`#9932cc`)
+
* <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 class="color-box"></ins>darkred (`#8b0000`)
+
* <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 class="color-box"></ins>darksalmon (`#e9967a`)
+
* <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 class="color-box"></ins>darkseagreen (`#8fbc8f`)
+
* <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 class="color-box"></ins>darkslateblue (`#483d8b`)
+
* <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 class="color-box"></ins>darkslategrey (`#2f4f4f`)
+
* <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 class="color-box"></ins>darkturquoise (`#00ced1`)
+
* <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 class="color-box"></ins>darkviolet (`#9400d3`)
+
* <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 class="color-box"></ins>deeppink (`#ff1493`)
+
* <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 class="color-box"></ins>deepskyblue (`#00bfff`)
+
* <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 class="color-box"></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> dimgray ‏(`#696969`)
−
* <ins class="color-box"></ins>dimgrey (`#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 class="color-box"></ins>dodgerblue (`#1e90ff`)
+
* <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 class="color-box"></ins>firebrick (`#b22222`)
+
* <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 class="color-box"></ins>floralwhite (`#fffaf0`)
+
* <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 class="color-box"></ins>forestgreen (`#228b22`)
+
* <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 class="color-box"></ins>fuchsia (`#ff00ff`)
+
* <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 class="color-box"></ins>gainsboro (`#dcdcdc`)
+
* <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 class="color-box"></ins>ghostwhite (`#f8f8ff`)
+
* <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 class="color-box"></ins>gold (`#ffd700`)
+
* <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 class="color-box"></ins>goldenrod (`#daa520`)
+
* <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 class="color-box"></ins>gray (`#808080`)
+
* <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 class="color-box"></ins>green (`#008000`)
+
* <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 class="color-box"></ins>greenyellow (`#adff2f`)
+
* <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 class="color-box"></ins>grey (`#808080`)
+
* <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 class="color-box"></ins>honeydew (`#f0fff0`)
+
* <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 class="color-box"></ins>hotpink (`#ff69b4`)
+
* <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 class="color-box"></ins>indianred (`#cd5c5c`)
+
* <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 class="color-box"></ins>indigo (`#4b0082`)
+
* <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 class="color-box"></ins>ivory (`#fffff0`)
+
* <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 class="color-box"></ins>khaki (`#f0e68c`)
+
* <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 class="color-box"></ins>lavender (`#e6e6fa`)
+
* <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 class="color-box"></ins>lavenderblush (`#fff0f5`)
+
* <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 class="color-box"></ins>lawngreen (`#7cfc00`)
+
* <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 class="color-box"></ins>lemonchiffon (`#fffacd`)
+
* <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 class="color-box"></ins>lightblue (`#add8e6`)
+
* <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 class="color-box"></ins>lightcoral (`#f08080`)
+
* <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 class="color-box"></ins>lightcyan (`#e0ffff`)
+
* <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 class="color-box"></ins>lightgoldenrodyellow (`#fafad2`)
+
* <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 class="color-box"></ins>lightgray (`#d3d3d3`)
+
* <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 class="color-box"></ins>lightgreen (`#90ee90`)
+
* <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 class="color-box"></ins>lightgrey (`#d3d3d3`)
+
* <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 class="color-box"></ins>lightpink (`#ffb6c1`)
+
* <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 class="color-box"></ins>lightsalmon (`#ffa07a`)
+
* <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 class="color-box"></ins>lightseagreen (`#20b2aa`)
+
* <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 class="color-box"></ins>lightskyblue (`#87cefa`)
+
* <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 class="color-box"></ins>lightslategrey (`#778899`)
+
* <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 class="color-box"></ins>lightsteelblue (`#b0c4de`)
+
* <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 class="color-box"></ins>lightyellow (`#ffffe0`)
+
* <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 class="color-box"></ins>lime (`#00ff00`)
+
* <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 class="color-box"></ins>limegreen (`#32cd32`)
+
* <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 class="color-box"></ins>linen (`#faf0e6`)
+
* <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 class="color-box"></ins>magenta (`#ff00ff`)
+
* <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 class="color-box"></ins>maroon (`#800000`)
+
* <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 class="color-box"></ins>mediumaquamarine (`#66cdaa`)
+
* <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 class="color-box"></ins>mediumblue (`#0000cd`)
+
* <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 class="color-box"></ins>mediumorchid (`#ba55d3`)
+
* <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 class="color-box"></ins>mediumpurple (`#9370db`)
+
* <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 class="color-box"></ins>mediumseagreen (`#3cb371`)
+
* <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 class="color-box"></ins>mediumslateblue (`#7b68ee`)
+
* <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 class="color-box"></ins>mediumspringgreen (`#00fa9a`)
+
* <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 class="color-box"></ins>mediumturquoise (`#48d1cc`)
+
* <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 class="color-box"></ins>mediumvioletred (`#c71585`)
+
* <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 class="color-box"></ins>midnightblue (`#191970`)
+
* <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 class="color-box"></ins>mintcream (`#f5fffa`)
+
* <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 class="color-box"></ins>mistyrose (`#ffe4e1`)
+
* <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 class="color-box"></ins>moccasin (`#ffe4b5`)
+
* <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 class="color-box"></ins>navajowhite (`#ffdead`)
+
* <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 class="color-box"></ins>navy (`#000080`)
+
* <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 class="color-box"></ins>oldlace (`#fdf5e6`)
+
* <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 class="color-box"></ins>olive (`#808000`)
+
* <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 class="color-box"></ins>olivedrab (`#6b8e23`)
+
* <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 class="color-box"></ins>orange (`#ffa500`)
+
* <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 class="color-box"></ins>orangered (`#ff4500`)
+
* <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 class="color-box"></ins>orchid (`#da70d6`)
+
* <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 class="color-box"></ins>palegoldenrod (`#eee8aa`)
+
* <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 class="color-box"></ins>palegreen (`#98fb98`)
+
* <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 class="color-box"></ins>paleturquoise (`#afeeee`)
+
* <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 class="color-box"></ins>palevioletred (`#db7093`)
+
* <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 class="color-box"></ins>papayawhip (`#ffefd5`)
+
* <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 class="color-box"></ins>peachpuff (`#ffdab9`)
+
* <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 class="color-box"></ins>peru (`#cd853f`)
+
* <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 class="color-box"></ins>pink (`#ffc0cb`)
+
* <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 class="color-box"></ins>plum (`#dda0dd`)
+
* <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 class="color-box"></ins>powderblue (`#b0e0e6`)
+
* <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 class="color-box"></ins>purple (`#800080`)
+
* <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 class="color-box"></ins>rebeccapurple (`#663399`)
+
* <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 class="color-box"></ins>red (`#ff0000`)
+
* <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 class="color-box"></ins>rosybrown (`#bc8f8f`)
+
* <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 class="color-box"></ins>royalblue (`#4169e1`)
+
* <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 class="color-box"></ins>saddlebrown (`#8b4513`)
+
* <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 class="color-box"></ins>salmon (`#fa8072`)
+
* <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 class="color-box"></ins>sandybrown (`#f4a460`)
+
* <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 class="color-box"></ins>seagreen (`#2e8b57`)
+
* <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 class="color-box"></ins>seashell (`#fff5ee`)
+
* <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 class="color-box"></ins>sienna (`#a0522d`)
+
* <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 class="color-box"></ins>silver (`#c0c0c0`)
+
* <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 class="color-box"></ins>skyblue (`#87ceeb`)
+
* <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 class="color-box"></ins>slateblue (`#6a5acd`)
+
* <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 class="color-box"></ins>slategray (`#708090`)
+
* <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 class="color-box"></ins>snow (`#fffafa`)
+
* <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 class="color-box"></ins>springgreen (`#00ff7f`)
+
* <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 class="color-box"></ins>steelblue (`#4682b4`)
+
* <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 class="color-box"></ins>tan (`#d2b48c`)
+
* <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 class="color-box"></ins>teal (`#008080`)
+
* <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 class="color-box"></ins>thistle (`#d8bfd8`)
+
* <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 class="color-box"></ins>tomato (`#ff6347`)
+
* <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 class="color-box"></ins>turquoise (`#40e0d0`)
+
* <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 class="color-box"></ins>violet (`#ee82ee`)
+
* <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 class="color-box"></ins>wheat (`#f5deb3`)
+
* <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 class="color-box"></ins>white (`#ffffff`)
+
* <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 class="color-box"></ins>whitesmoke (`#f5f5f5`)
+
* <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 class="color-box"></ins>yellow (`#ffff00`)
+
* <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 class="color-box"></ins>yellowgreen (`#9acd32`)
+
* <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 الرسمي.]
 
* [https://facebook.github.io/react-native/docs/colors صفحة Color Reference في توثيق React Native الرسمي.]
 
[[تصنيف:ReactNative]]
 
[[تصنيف:ReactNative]]
 +
[[تصنيف:React Native Docs]]

المراجعة الحالية بتاريخ 13:40، 9 أكتوبر 2021

تُنسَّق المكونات في React Native باستخدام JavaScript. تتوافق خاصيات الألوان عادة مع كيفية عمل CSS على الويب.

واجهات الألوان البرمجية (Color APIs)

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

  • PlatformColor: يتيح لك الرجوع إلى نظام ألوان النظام الأساسي.
  • DynamicColorIOS: خاص بنظام iOS يسمح لك بتحديد الألوان التي يجب استخدامها في الوضع الفاتح أو الداكن.

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

نظام RGB: أحمر-أخضر-أزرق (red-green-blue)

يدعم React Native تحديد الألوان في نظام الألوان RGB عبر الرموز الست عشرية (hexadecimal) أو عبر الطريقة الداليّة (functional) باستعمال الدالة ‎‎rgb()‎‎‎ والدالة ‎‎rgba()‎‎:

  • ‎'#‎‎f0f' ‎‏(‎#‎rgb‎)‎‎
  • ‎‎'#ff00ff' ‎‏(‎#rrggbb)‎
  • '‎#f0ff' ‏(‎#rgba)
  • '‎#ff00ff00' ‏(‎#rrggbbaa)
  • 'rgb(255, 0, 255)'
  • 'rgba(255, 0, 255, 1.0)'

نظام HSL: الصبغة-التشبع-الإضاءة (Hue-saturation-lightness)

تدعم React Native تحديد اللون في نظام الألوان HSL بالطريقة الدالية عبر الدالة ‎‎hsl()‎‎ والدالة ‎‎hsla()‎‎:

  • ‎‎'hsl(360, 100%, 100%)'‎‎
  • ‎‎'hsla(360, 100%, 100%, 1.0)'‎‎

أرقام الألوان (color ints)

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

  • 0xff00ff00 ‏(0xrrggbbaa)

لاحظ أن هذا قد يبدو مشابهًا لأرقام الألوان في Android لكن القيم في Android تخزن بنظام ألوان SRGB أي (0xaarrggbb)

الألوان المسماة (Named colors)

يمكنك كذلك استخدام أسماء الألوان كقِيَم في React Native.

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

‎‎transparent‎‎

هذا اختصارٌ لــ ‎‎rgba(0,0,0,0)‎‎‎‎ تمامًا كما في CSS3.

الكلمات الأساسية للألوان

يتّبع إطار العمل React Native تسمية الألوان واستعمالها كقيم مواصفة CSS3/SVG (تجد الألوان مع تسمياتها ضمن القسمين 4.1 و 4.3):

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

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/colors&oldid=31478"