Text Decoration Color
Set the color of text decorations.
Import​
import { decoration } from "nativeflowcss";
Properties​
| Object | Native Properties | Color Box |
|---|---|---|
| decoration.color_slate_50 | { textDecorationColor: '#f8fafc' } | colourful underline |
| decoration.color_slate_100 | { textDecorationColor: '#f1f5f9' } | colourful underline |
| decoration.color_slate_200 | { textDecorationColor: '#e2e8f0' } | colourful underline |
| decoration.color_slate_300 | { textDecorationColor: '#cbd5e1' } | colourful underline |
| decoration.color_slate_400 | { textDecorationColor: '#94a3b8' } | colourful underline |
| decoration.color_slate_500 | { textDecorationColor: '#64748b' } | colourful underline |
| decoration.color_slate_600 | { textDecorationColor: '#475569' } | colourful underline |
| decoration.color_slate_700 | { textDecorationColor: '#334155' } | colourful underline |
| decoration.color_slate_800 | { textDecorationColor: '#1e293b' } | colourful underline |
| decoration.color_slate_900 | { textDecorationColor: '#0f172a' } | colourful underline |
| decoration.color_slate_950 | { textDecorationColor: '#020617' } | colourful underline |
| decoration.color_gray_50 | { textDecorationColor: '#f9fafb' } | colourful underline |
| decoration.color_gray_100 | { textDecorationColor: '#f3f4f6' } | colourful underline |
| decoration.color_gray_200 | { textDecorationColor: '#e5e7eb' } | colourful underline |
| decoration.color_gray_300 | { textDecorationColor: '#d1d5db' } | colourful underline |
| decoration.color_gray_400 | { textDecorationColor: '#9ca3af' } | colourful underline |
| decoration.color_gray_500 | { textDecorationColor: '#6b7280' } | colourful underline |
| decoration.color_gray_600 | { textDecorationColor: '#4b5563' } | colourful underline |
| decoration.color_gray_700 | { textDecorationColor: '#374151' } | colourful underline |
| decoration.color_gray_800 | { textDecorationColor: '#1f2937' } | colourful underline |
| decoration.color_gray_900 | { textDecorationColor: '#111827' } | colourful underline |
| decoration.color_gray_950 | { textDecorationColor: '#030712' } | colourful underline |
| decoration.color_zinc_50 | { textDecorationColor: '#fafafa' } | colourful underline |
| decoration.color_zinc_100 | { textDecorationColor: '#f4f4f5' } | colourful underline |
| decoration.color_zinc_200 | { textDecorationColor: '#e4e4e7' } | colourful underline |
| decoration.color_zinc_300 | { textDecorationColor: '#d4d4d8' } | colourful underline |
| decoration.color_zinc_400 | { textDecorationColor: '#a1a1aa' } | colourful underline |
| decoration.color_zinc_500 | { textDecorationColor: '#71717a' } | colourful underline |
| decoration.color_zinc_600 | { textDecorationColor: '#52525b' } | colourful underline |
| decoration.color_zinc_700 | { textDecorationColor: '#3f3f46' } | colourful underline |
| decoration.color_zinc_800 | { textDecorationColor: '#27272a' } | colourful underline |
| decoration.color_zinc_900 | { textDecorationColor: '#18181b' } | colourful underline |
| decoration.color_zinc_950 | { textDecorationColor: '#09090b' } | colourful underline |
| decoration.color_neutral_50 | { textDecorationColor: '#fafafa' } | colourful underline |
| decoration.color_neutral_100 | { textDecorationColor: '#f5f5f5' } | colourful underline |
| decoration.color_neutral_200 | { textDecorationColor: '#e5e5e5' } | colourful underline |
| decoration.color_neutral_300 | { textDecorationColor: '#d4d4d4' } | colourful underline |
| decoration.color_neutral_400 | { textDecorationColor: '#a3a3a3' } | colourful underline |
| decoration.color_neutral_500 | { textDecorationColor: '#737373' } | colourful underline |
| decoration.color_neutral_600 | { textDecorationColor: '#525252' } | colourful underline |
| decoration.color_neutral_700 | { textDecorationColor: '#404040' } | colourful underline |
| decoration.color_neutral_800 | { textDecorationColor: '#262626' } | colourful underline |
| decoration.color_neutral_900 | { textDecorationColor: '#171717' } | colourful underline |
| decoration.color_neutral_950 | { textDecorationColor: '#0a0a0a' } | colourful underline |
| decoration.color_stone_50 | { textDecorationColor: '#fafaf9' } | colourful underline |
| decoration.color_stone_100 | { textDecorationColor: '#f5f5f4' } | colourful underline |
| decoration.color_stone_200 | { textDecorationColor: '#e7e5e4' } | colourful underline |
| decoration.color_stone_300 | { textDecorationColor: '#d6d3d1' } | colourful underline |
| decoration.color_stone_400 | { textDecorationColor: '#a8a29e' } | colourful underline |
| decoration.color_stone_500 | { textDecorationColor: '#78716c' } | colourful underline |
| decoration.color_stone_600 | { textDecorationColor: '#57534e' } | colourful underline |
| decoration.color_stone_700 | { textDecorationColor: '#44403c' } | colourful underline |
| decoration.color_stone_800 | { textDecorationColor: '#292524' } | colourful underline |
| decoration.color_stone_900 | { textDecorationColor: '#1c1917' } | colourful underline |
| decoration.color_stone_950 | { textDecorationColor: '#0c0a09' } | colourful underline |
| decoration.color_red_50 | { textDecorationColor: '#fef2f2' } | colourful underline |
| decoration.color_red_100 | { textDecorationColor: '#fee2e2' } | colourful underline |
| decoration.color_red_200 | { textDecorationColor: '#fecaca' } | colourful underline |
| decoration.color_red_300 | { textDecorationColor: '#fca5a5' } | colourful underline |
| decoration.color_red_400 | { textDecorationColor: '#f87171' } | colourful underline |
| decoration.color_red_500 | { textDecorationColor: '#ef4444' } | colourful underline |
| decoration.color_red_600 | { textDecorationColor: '#dc2626' } | colourful underline |
| decoration.color_red_700 | { textDecorationColor: '#b91c1c' } | colourful underline |
| decoration.color_red_800 | { textDecorationColor: '#991b1b' } | colourful underline |
| decoration.color_red_900 | { textDecorationColor: '#7f1d1d' } | colourful underline |
| decoration.color_red_950 | { textDecorationColor: '#450a0a' } | colourful underline |
| decoration.color_orange_50 | { textDecorationColor: '#fff7ed' } | colourful underline |
| decoration.color_orange_100 | { textDecorationColor: '#ffedd5' } | colourful underline |
| decoration.color_orange_200 | { textDecorationColor: '#fed7aa' } | colourful underline |
| decoration.color_orange_300 | { textDecorationColor: '#fdba74' } | colourful underline |
| decoration.color_orange_400 | { textDecorationColor: '#fb923c' } | colourful underline |
| decoration.color_orange_500 | { textDecorationColor: '#f97316' } | colourful underline |
| decoration.color_orange_600 | { textDecorationColor: '#ea580c' } | colourful underline |
| decoration.color_orange_700 | { textDecorationColor: '#c2410c' } | colourful underline |
| decoration.color_orange_800 | { textDecorationColor: '#9a3412' } | colourful underline |
| decoration.color_orange_900 | { textDecorationColor: '#7c2d12' } | colourful underline |
| decoration.color_orange_950 | { textDecorationColor: '#431407' } | colourful underline |
| decoration.color_amber_50 | { textDecorationColor: '#fffbeb' } | colourful underline |
| decoration.color_amber_100 | { textDecorationColor: '#fef3c7' } | colourful underline |
| decoration.color_amber_200 | { textDecorationColor: '#fde68a' } | colourful underline |
| decoration.color_amber_300 | { textDecorationColor: '#fcd34d' } | colourful underline |
| decoration.color_amber_400 | { textDecorationColor: '#fbbf24' } | colourful underline |
| decoration.color_amber_500 | { textDecorationColor: '#f59e0b' } | colourful underline |
| decoration.color_amber_600 | { textDecorationColor: '#d97706' } | colourful underline |
| decoration.color_amber_700 | { textDecorationColor: '#b45309' } | colourful underline |
| decoration.color_amber_800 | { textDecorationColor: '#92400e' } | colourful underline |
| decoration.color_amber_900 | { textDecorationColor: '#78350f' } | colourful underline |
| decoration.color_amber_950 | { textDecorationColor: '#451a03' } | colourful underline |
| decoration.color_yellow_50 | { textDecorationColor: '#fefce8' } | colourful underline |
| decoration.color_yellow_100 | { textDecorationColor: '#fef9c3' } | colourful underline |
| decoration.color_yellow_200 | { textDecorationColor: '#fef08a' } | colourful underline |
| decoration.color_yellow_300 | { textDecorationColor: '#fde047' } | colourful underline |
| decoration.color_yellow_400 | { textDecorationColor: '#facc15' } | colourful underline |
| decoration.color_yellow_500 | { textDecorationColor: '#eab308' } | colourful underline |
| decoration.color_yellow_600 | { textDecorationColor: '#ca8a04' } | colourful underline |
| decoration.color_yellow_700 | { textDecorationColor: '#a16207' } | colourful underline |
| decoration.color_yellow_800 | { textDecorationColor: '#854d0e' } | colourful underline |
| decoration.color_yellow_900 | { textDecorationColor: '#713f12' } | colourful underline |
| decoration.color_yellow_950 | { textDecorationColor: '#422006' } | colourful underline |
| decoration.color_lime_50 | { textDecorationColor: '#f7fee7' } | colourful underline |
| decoration.color_lime_100 | { textDecorationColor: '#ecfccb' } | colourful underline |
| decoration.color_lime_200 | { textDecorationColor: '#d9f99d' } | colourful underline |
| decoration.color_lime_300 | { textDecorationColor: '#bef264' } | colourful underline |
| decoration.color_lime_400 | { textDecorationColor: '#a3e635' } | colourful underline |
| decoration.color_lime_500 | { textDecorationColor: '#84cc16' } | colourful underline |
| decoration.color_lime_600 | { textDecorationColor: '#65a30d' } | colourful underline |
| decoration.color_lime_700 | { textDecorationColor: '#4d7c0f' } | colourful underline |
| decoration.color_lime_800 | { textDecorationColor: '#3f6212' } | colourful underline |
| decoration.color_lime_900 | { textDecorationColor: '#365314' } | colourful underline |
| decoration.color_lime_950 | { textDecorationColor: '#1a2e05' } | colourful underline |
| decoration.color_green_50 | { textDecorationColor: '#f0fdf4' } | colourful underline |
| decoration.color_green_100 | { textDecorationColor: '#dcfce7' } | colourful underline |
| decoration.color_green_200 | { textDecorationColor: '#bbf7d0' } | colourful underline |
| decoration.color_green_300 | { textDecorationColor: '#86efac' } | colourful underline |
| decoration.color_green_400 | { textDecorationColor: '#4ade80' } | colourful underline |
| decoration.color_green_500 | { textDecorationColor: '#22c55e' } | colourful underline |
| decoration.color_green_600 | { textDecorationColor: '#16a34a' } | colourful underline |
| decoration.color_green_700 | { textDecorationColor: '#15803d' } | colourful underline |
| decoration.color_green_800 | { textDecorationColor: '#166534' } | colourful underline |
| decoration.color_green_900 | { textDecorationColor: '#14532d' } | colourful underline |
| decoration.color_green_950 | { textDecorationColor: '#052e16' } | colourful underline |
| decoration.color_emerald_50 | { textDecorationColor: '#ecfdf5' } | colourful underline |
| decoration.color_emerald_100 | { textDecorationColor: '#d1fae5' } | colourful underline |
| decoration.color_emerald_200 | { textDecorationColor: '#a7f3d0' } | colourful underline |
| decoration.color_emerald_300 | { textDecorationColor: '#6ee7b7' } | colourful underline |
| decoration.color_emerald_400 | { textDecorationColor: '#34d399' } | colourful underline |
| decoration.color_emerald_500 | { textDecorationColor: '#10b981' } | colourful underline |
| decoration.color_emerald_600 | { textDecorationColor: '#059669' } | colourful underline |
| decoration.color_emerald_700 | { textDecorationColor: '#047857' } | colourful underline |
| decoration.color_emerald_800 | { textDecorationColor: '#065f46' } | colourful underline |
| decoration.color_emerald_900 | { textDecorationColor: '#064e3b' } | colourful underline |
| decoration.color_emerald_950 | { textDecorationColor: '#022c22' } | colourful underline |
| decoration.color_teal_50 | { textDecorationColor: '#f0fdfa' } | colourful underline |
| decoration.color_teal_100 | { textDecorationColor: '#ccfbf1' } | colourful underline |
| decoration.color_teal_200 | { textDecorationColor: '#99f6e4' } | colourful underline |
| decoration.color_teal_300 | { textDecorationColor: '#5eead4' } | colourful underline |
| decoration.color_teal_400 | { textDecorationColor: '#2dd4bf' } | colourful underline |
| decoration.color_teal_500 | { textDecorationColor: '#14b8a6' } | colourful underline |
| decoration.color_teal_600 | { textDecorationColor: '#0d9488' } | colourful underline |
| decoration.color_teal_700 | { textDecorationColor: '#0f766e' } | colourful underline |
| decoration.color_teal_800 | { textDecorationColor: '#115e59' } | colourful underline |
| decoration.color_teal_900 | { textDecorationColor: '#134e4a' } | colourful underline |
| decoration.color_teal_950 | { textDecorationColor: '#042f2e' } | colourful underline |
| decoration.color_cyan_50 | { textDecorationColor: '#ecfeff' } | colourful underline |
| decoration.color_cyan_100 | { textDecorationColor: '#cffafe' } | colourful underline |
| decoration.color_cyan_200 | { textDecorationColor: '#a5f3fc' } | colourful underline |
| decoration.color_cyan_300 | { textDecorationColor: '#67e8f9' } | colourful underline |
| decoration.color_cyan_400 | { textDecorationColor: '#22d3ee' } | colourful underline |
| decoration.color_cyan_500 | { textDecorationColor: '#06b6d4' } | colourful underline |
| decoration.color_cyan_600 | { textDecorationColor: '#0891b2' } | colourful underline |
| decoration.color_cyan_700 | { textDecorationColor: '#0e7490' } | colourful underline |
| decoration.color_cyan_800 | { textDecorationColor: '#155e75' } | colourful underline |
| decoration.color_cyan_900 | { textDecorationColor: '#164e63' } | colourful underline |
| decoration.color_cyan_950 | { textDecorationColor: '#083344' } | colourful underline |
| decoration.color_sky_50 | { textDecorationColor: '#f0f9ff' } | colourful underline |
| decoration.color_sky_100 | { textDecorationColor: '#e0f2fe' } | colourful underline |
| decoration.color_sky_200 | { textDecorationColor: '#bae6fd' } | colourful underline |
| decoration.color_sky_300 | { textDecorationColor: '#7dd3fc' } | colourful underline |
| decoration.color_sky_400 | { textDecorationColor: '#38bdf8' } | colourful underline |
| decoration.color_sky_500 | { textDecorationColor: '#0ea5e9' } | colourful underline |
| decoration.color_sky_600 | { textDecorationColor: '#0284c7' } | colourful underline |
| decoration.color_sky_700 | { textDecorationColor: '#0369a1' } | colourful underline |
| decoration.color_sky_800 | { textDecorationColor: '#075985' } | colourful underline |
| decoration.color_sky_900 | { textDecorationColor: '#0c4a6e' } | colourful underline |
| decoration.color_sky_950 | { textDecorationColor: '#082f49' } | colourful underline |
| decoration.color_blue_50 | { textDecorationColor: '#eff6ff' } | colourful underline |
| decoration.color_blue_100 | { textDecorationColor: '#dbeafe' } | colourful underline |
| decoration.color_blue_200 | { textDecorationColor: '#bfdbfe' } | colourful underline |
| decoration.color_blue_300 | { textDecorationColor: '#93c5fd' } | colourful underline |
| decoration.color_blue_400 | { textDecorationColor: '#60a5fa' } | colourful underline |
| decoration.color_blue_500 | { textDecorationColor: '#3b82f6' } | colourful underline |
| decoration.color_blue_600 | { textDecorationColor: '#2563eb' } | colourful underline |
| decoration.color_blue_700 | { textDecorationColor: '#1d4ed8' } | colourful underline |
| decoration.color_blue_800 | { textDecorationColor: '#1e40af' } | colourful underline |
| decoration.color_blue_900 | { textDecorationColor: '#1e3a8a' } | colourful underline |
| decoration.color_blue_950 | { textDecorationColor: '#172554' } | colourful underline |
| decoration.color_indigo_50 | { textDecorationColor: '#eef2ff' } | colourful underline |
| decoration.color_indigo_100 | { textDecorationColor: '#e0e7ff' } | colourful underline |
| decoration.color_indigo_200 | { textDecorationColor: '#c7d2fe' } | colourful underline |
| decoration.color_indigo_300 | { textDecorationColor: '#a5b4fc' } | colourful underline |
| decoration.color_indigo_400 | { textDecorationColor: '#818cf8' } | colourful underline |
| decoration.color_indigo_500 | { textDecorationColor: '#6366f1' } | colourful underline |
| decoration.color_indigo_600 | { textDecorationColor: '#4f46e5' } | colourful underline |
| decoration.color_indigo_700 | { textDecorationColor: '#4338ca' } | colourful underline |
| decoration.color_indigo_800 | { textDecorationColor: '#3730a3' } | colourful underline |
| decoration.color_indigo_900 | { textDecorationColor: '#312e81' } | colourful underline |
| decoration.color_indigo_950 | { textDecorationColor: '#1e1b4b' } | colourful underline |
| decoration.color_violet_50 | { textDecorationColor: '#f5f3ff' } | colourful underline |
| decoration.color_violet_100 | { textDecorationColor: '#ede9fe' } | colourful underline |
| decoration.color_violet_200 | { textDecorationColor: '#ddd6fe' } | colourful underline |
| decoration.color_violet_300 | { textDecorationColor: '#c4b5fd' } | colourful underline |
| decoration.color_violet_400 | { textDecorationColor: '#a78bfa' } | colourful underline |
| decoration.color_violet_500 | { textDecorationColor: '#8b5cf6' } | colourful underline |
| decoration.color_violet_600 | { textDecorationColor: '#7c3aed' } | colourful underline |
| decoration.color_violet_700 | { textDecorationColor: '#6d28d9' } | colourful underline |
| decoration.color_violet_800 | { textDecorationColor: '#5b21b6' } | colourful underline |
| decoration.color_violet_900 | { textDecorationColor: '#4c1d95' } | colourful underline |
| decoration.color_violet_950 | { textDecorationColor: '#2e1065' } | colourful underline |
| decoration.color_purple_50 | { textDecorationColor: '#faf5ff' } | colourful underline |
| decoration.color_purple_100 | { textDecorationColor: '#f3e8ff' } | colourful underline |
| decoration.color_purple_200 | { textDecorationColor: '#e9d5ff' } | colourful underline |
| decoration.color_purple_300 | { textDecorationColor: '#d8b4fe' } | colourful underline |
| decoration.color_purple_400 | { textDecorationColor: '#c084fc' } | colourful underline |
| decoration.color_purple_500 | { textDecorationColor: '#a855f7' } | colourful underline |
| decoration.color_purple_600 | { textDecorationColor: '#9333ea' } | colourful underline |
| decoration.color_purple_700 | { textDecorationColor: '#7e22ce' } | colourful underline |
| decoration.color_purple_800 | { textDecorationColor: '#6b21a8' } | colourful underline |
| decoration.color_purple_900 | { textDecorationColor: '#581c87' } | colourful underline |
| decoration.color_purple_950 | { textDecorationColor: '#3b0764' } | colourful underline |
| decoration.color_fuchsia_50 | { textDecorationColor: '#fdf4ff' } | colourful underline |
| decoration.color_fuchsia_100 | { textDecorationColor: '#fae8ff' } | colourful underline |
| decoration.color_fuchsia_200 | { textDecorationColor: '#f5d0fe' } | colourful underline |
| decoration.color_fuchsia_300 | { textDecorationColor: '#f0abfc' } | colourful underline |
| decoration.color_fuchsia_400 | { textDecorationColor: '#e879f9' } | colourful underline |
| decoration.color_fuchsia_500 | { textDecorationColor: '#d946ef' } | colourful underline |
| decoration.color_fuchsia_600 | { textDecorationColor: '#c026d3' } | colourful underline |
| decoration.color_fuchsia_700 | { textDecorationColor: '#a21caf' } | colourful underline |
| decoration.color_fuchsia_800 | { textDecorationColor: '#86198f' } | colourful underline |
| decoration.color_fuchsia_900 | { textDecorationColor: '#701a75' } | colourful underline |
| decoration.color_fuchsia_950 | { textDecorationColor: '#4a044e' } | colourful underline |
| decoration.color_pink_50 | { textDecorationColor: '#fdf2f8' } | colourful underline |
| decoration.color_pink_100 | { textDecorationColor: '#fce7f3' } | colourful underline |
| decoration.color_pink_200 | { textDecorationColor: '#fbcfe8' } | colourful underline |
| decoration.color_pink_300 | { textDecorationColor: '#f9a8d4' } | colourful underline |
| decoration.color_pink_400 | { textDecorationColor: '#f472b6' } | colourful underline |
| decoration.color_pink_500 | { textDecorationColor: '#ec4899' } | colourful underline |
| decoration.color_pink_600 | { textDecorationColor: '#db2777' } | colourful underline |
| decoration.color_pink_700 | { textDecorationColor: '#be185d' } | colourful underline |
| decoration.color_pink_800 | { textDecorationColor: '#9d174d' } | colourful underline |
| decoration.color_pink_900 | { textDecorationColor: '#831843' } | colourful underline |
| decoration.color_pink_950 | { textDecorationColor: '#500724' } | colourful underline |
| decoration.color_rose_50 | { textDecorationColor: '#fff1f2' } | colourful underline |
| decoration.color_rose_100 | { textDecorationColor: '#ffe4e6' } | colourful underline |
| decoration.color_rose_200 | { textDecorationColor: '#fecdd3' } | colourful underline |
| decoration.color_rose_300 | { textDecorationColor: '#fda4af' } | colourful underline |
| decoration.color_rose_400 | { textDecorationColor: '#fb7185' } | colourful underline |
| decoration.color_rose_500 | { textDecorationColor: '#f43f5e' } | colourful underline |
| decoration.color_rose_600 | { textDecorationColor: '#e11d48' } | colourful underline |
| decoration.color_rose_700 | { textDecorationColor: '#be123c' } | colourful underline |
| decoration.color_rose_800 | { textDecorationColor: '#9f1239' } | colourful underline |
| decoration.color_rose_900 | { textDecorationColor: '#881337' } | colourful underline |
| decoration.color_rose_950 | { textDecorationColor: '#4c0519' } | colourful underline |
Custom Overlay Colors​
Custom properties are usually rendered using _(customValue)
| Object | Native Properties |
|---|---|
| decoration.color_(customColor) | { textDecorationColor: customColor } |
Colors​
Red Green Blue (RGB)​
React Native supports rgb() and rgba() in both hexadecimal and functional notation:
'#f0f'(#rgb)'#ff00ff'(#rrggbb)'#f0ff'(#rgba)'#ff00ff00'(#rrggbbaa)'rgb(255, 0, 255)''rgb(255 0 255)''rgba(255, 0, 255, 1.0)''rgba(255 0 255 / 1.0)'
Hue Saturation Lightness (HSL)​
React Native supports hsl() and hsla() in functional notation:
'hsl(360, 100%, 100%)''hsl(360 100% 100%)''hsla(360, 100%, 100%, 1.0)''hsla(360 100% 100% / 1.0)'
Hue Whiteness Blackness (HWB)​
React Native supports hwb() in functional notation:
'hwb(0, 0%, 100%)''hwb(360, 100%, 100%)''hwb(0 0% 0%)''hwb(70 50% 0%)'
Color ints​
React Native supports also colors as an int values (in RGB color mode):
0xff00ff00(0xrrggbbaa)
This action is dangerous
This might appear similar to the Android Color ints representation but on Android values are stored in SRGB color mode (0xaarrggbb).
Named Colors​
All colors from the CSS3/SVG Specs are supported.
They only support lowercase named colors