Skip to main content

Background Color

Apply background colors to elements.

Import​

src/screens/Component.js
import { fx } from "nativeflowcss";

Properties​

ObjectNative PropertiesColor Box
fx.bg_color_slate_50{ backgroundColor: '#f8fafc' }
fx.bg_color_slate_100{ backgroundColor: '#f1f5f9' }
fx.bg_color_slate_200{ backgroundColor: '#e2e8f0' }
fx.bg_color_slate_300{ backgroundColor: '#cbd5e1' }
fx.bg_color_slate_400{ backgroundColor: '#94a3b8' }
fx.bg_color_slate_500{ backgroundColor: '#64748b' }
fx.bg_color_slate_600{ backgroundColor: '#475569' }
fx.bg_color_slate_700{ backgroundColor: '#334155' }
fx.bg_color_slate_800{ backgroundColor: '#1e293b' }
fx.bg_color_slate_900{ backgroundColor: '#0f172a' }
fx.bg_color_slate_950{ backgroundColor: '#020617' }
fx.bg_color_gray_50{ backgroundColor: '#f9fafb' }
fx.bg_color_gray_100{ backgroundColor: '#f3f4f6' }
fx.bg_color_gray_200{ backgroundColor: '#e5e7eb' }
fx.bg_color_gray_300{ backgroundColor: '#d1d5db' }
fx.bg_color_gray_400{ backgroundColor: '#9ca3af' }
fx.bg_color_gray_500{ backgroundColor: '#6b7280' }
fx.bg_color_gray_600{ backgroundColor: '#4b5563' }
fx.bg_color_gray_700{ backgroundColor: '#374151' }
fx.bg_color_gray_800{ backgroundColor: '#1f2937' }
fx.bg_color_gray_900{ backgroundColor: '#111827' }
fx.bg_color_gray_950{ backgroundColor: '#030712' }
fx.bg_color_zinc_50{ backgroundColor: '#fafafa' }
fx.bg_color_zinc_100{ backgroundColor: '#f4f4f5' }
fx.bg_color_zinc_200{ backgroundColor: '#e4e4e7' }
fx.bg_color_zinc_300{ backgroundColor: '#d4d4d8' }
fx.bg_color_zinc_400{ backgroundColor: '#a1a1aa' }
fx.bg_color_zinc_500{ backgroundColor: '#71717a' }
fx.bg_color_zinc_600{ backgroundColor: '#52525b' }
fx.bg_color_zinc_700{ backgroundColor: '#3f3f46' }
fx.bg_color_zinc_800{ backgroundColor: '#27272a' }
fx.bg_color_zinc_900{ backgroundColor: '#18181b' }
fx.bg_color_zinc_950{ backgroundColor: '#09090b' }
fx.bg_color_neutral_50{ backgroundColor: '#fafafa' }
fx.bg_color_neutral_100{ backgroundColor: '#f5f5f5' }
fx.bg_color_neutral_200{ backgroundColor: '#e5e5e5' }
fx.bg_color_neutral_300{ backgroundColor: '#d4d4d4' }
fx.bg_color_neutral_400{ backgroundColor: '#a3a3a3' }
fx.bg_color_neutral_500{ backgroundColor: '#737373' }
fx.bg_color_neutral_600{ backgroundColor: '#525252' }
fx.bg_color_neutral_700{ backgroundColor: '#404040' }
fx.bg_color_neutral_800{ backgroundColor: '#262626' }
fx.bg_color_neutral_900{ backgroundColor: '#171717' }
fx.bg_color_neutral_950{ backgroundColor: '#0a0a0a' }
fx.bg_color_stone_50{ backgroundColor: '#fafaf9' }
fx.bg_color_stone_100{ backgroundColor: '#f5f5f4' }
fx.bg_color_stone_200{ backgroundColor: '#e7e5e4' }
fx.bg_color_stone_300{ backgroundColor: '#d6d3d1' }
fx.bg_color_stone_400{ backgroundColor: '#a8a29e' }
fx.bg_color_stone_500{ backgroundColor: '#78716c' }
fx.bg_color_stone_600{ backgroundColor: '#57534e' }
fx.bg_color_stone_700{ backgroundColor: '#44403c' }
fx.bg_color_stone_800{ backgroundColor: '#292524' }
fx.bg_color_stone_900{ backgroundColor: '#1c1917' }
fx.bg_color_stone_950{ backgroundColor: '#0c0a09' }
fx.bg_color_red_50{ backgroundColor: '#fef2f2' }
fx.bg_color_red_100{ backgroundColor: '#fee2e2' }
fx.bg_color_red_200{ backgroundColor: '#fecaca' }
fx.bg_color_red_300{ backgroundColor: '#fca5a5' }
fx.bg_color_red_400{ backgroundColor: '#f87171' }
fx.bg_color_red_500{ backgroundColor: '#ef4444' }
fx.bg_color_red_600{ backgroundColor: '#dc2626' }
fx.bg_color_red_700{ backgroundColor: '#b91c1c' }
fx.bg_color_red_800{ backgroundColor: '#991b1b' }
fx.bg_color_red_900{ backgroundColor: '#7f1d1d' }
fx.bg_color_red_950{ backgroundColor: '#450a0a' }
fx.bg_color_orange_50{ backgroundColor: '#fff7ed' }
fx.bg_color_orange_100{ backgroundColor: '#ffedd5' }
fx.bg_color_orange_200{ backgroundColor: '#fed7aa' }
fx.bg_color_orange_300{ backgroundColor: '#fdba74' }
fx.bg_color_orange_400{ backgroundColor: '#fb923c' }
fx.bg_color_orange_500{ backgroundColor: '#f97316' }
fx.bg_color_orange_600{ backgroundColor: '#ea580c' }
fx.bg_color_orange_700{ backgroundColor: '#c2410c' }
fx.bg_color_orange_800{ backgroundColor: '#9a3412' }
fx.bg_color_orange_900{ backgroundColor: '#7c2d12' }
fx.bg_color_orange_950{ backgroundColor: '#431407' }
fx.bg_color_amber_50{ backgroundColor: '#fffbeb' }
fx.bg_color_amber_100{ backgroundColor: '#fef3c7' }
fx.bg_color_amber_200{ backgroundColor: '#fde68a' }
fx.bg_color_amber_300{ backgroundColor: '#fcd34d' }
fx.bg_color_amber_400{ backgroundColor: '#fbbf24' }
fx.bg_color_amber_500{ backgroundColor: '#f59e0b' }
fx.bg_color_amber_600{ backgroundColor: '#d97706' }
fx.bg_color_amber_700{ backgroundColor: '#b45309' }
fx.bg_color_amber_800{ backgroundColor: '#92400e' }
fx.bg_color_amber_900{ backgroundColor: '#78350f' }
fx.bg_color_amber_950{ backgroundColor: '#451a03' }
fx.bg_color_yellow_50{ backgroundColor: '#fefce8' }
fx.bg_color_yellow_100{ backgroundColor: '#fef9c3' }
fx.bg_color_yellow_200{ backgroundColor: '#fef08a' }
fx.bg_color_yellow_300{ backgroundColor: '#fde047' }
fx.bg_color_yellow_400{ backgroundColor: '#facc15' }
fx.bg_color_yellow_500{ backgroundColor: '#eab308' }
fx.bg_color_yellow_600{ backgroundColor: '#ca8a04' }
fx.bg_color_yellow_700{ backgroundColor: '#a16207' }
fx.bg_color_yellow_800{ backgroundColor: '#854d0e' }
fx.bg_color_yellow_900{ backgroundColor: '#713f12' }
fx.bg_color_yellow_950{ backgroundColor: '#422006' }
fx.bg_color_lime_50{ backgroundColor: '#f7fee7' }
fx.bg_color_lime_100{ backgroundColor: '#ecfccb' }
fx.bg_color_lime_200{ backgroundColor: '#d9f99d' }
fx.bg_color_lime_300{ backgroundColor: '#bef264' }
fx.bg_color_lime_400{ backgroundColor: '#a3e635' }
fx.bg_color_lime_500{ backgroundColor: '#84cc16' }
fx.bg_color_lime_600{ backgroundColor: '#65a30d' }
fx.bg_color_lime_700{ backgroundColor: '#4d7c0f' }
fx.bg_color_lime_800{ backgroundColor: '#3f6212' }
fx.bg_color_lime_900{ backgroundColor: '#365314' }
fx.bg_color_lime_950{ backgroundColor: '#1a2e05' }
fx.bg_color_green_50{ backgroundColor: '#f0fdf4' }
fx.bg_color_green_100{ backgroundColor: '#dcfce7' }
fx.bg_color_green_200{ backgroundColor: '#bbf7d0' }
fx.bg_color_green_300{ backgroundColor: '#86efac' }
fx.bg_color_green_400{ backgroundColor: '#4ade80' }
fx.bg_color_green_500{ backgroundColor: '#22c55e' }
fx.bg_color_green_600{ backgroundColor: '#16a34a' }
fx.bg_color_green_700{ backgroundColor: '#15803d' }
fx.bg_color_green_800{ backgroundColor: '#166534' }
fx.bg_color_green_900{ backgroundColor: '#14532d' }
fx.bg_color_green_950{ backgroundColor: '#052e16' }
fx.bg_color_emerald_50{ backgroundColor: '#ecfdf5' }
fx.bg_color_emerald_100{ backgroundColor: '#d1fae5' }
fx.bg_color_emerald_200{ backgroundColor: '#a7f3d0' }
fx.bg_color_emerald_300{ backgroundColor: '#6ee7b7' }
fx.bg_color_emerald_400{ backgroundColor: '#34d399' }
fx.bg_color_emerald_500{ backgroundColor: '#10b981' }
fx.bg_color_emerald_600{ backgroundColor: '#059669' }
fx.bg_color_emerald_700{ backgroundColor: '#047857' }
fx.bg_color_emerald_800{ backgroundColor: '#065f46' }
fx.bg_color_emerald_900{ backgroundColor: '#064e3b' }
fx.bg_color_emerald_950{ backgroundColor: '#022c22' }
fx.bg_color_teal_50{ backgroundColor: '#f0fdfa' }
fx.bg_color_teal_100{ backgroundColor: '#ccfbf1' }
fx.bg_color_teal_200{ backgroundColor: '#99f6e4' }
fx.bg_color_teal_300{ backgroundColor: '#5eead4' }
fx.bg_color_teal_400{ backgroundColor: '#2dd4bf' }
fx.bg_color_teal_500{ backgroundColor: '#14b8a6' }
fx.bg_color_teal_600{ backgroundColor: '#0d9488' }
fx.bg_color_teal_700{ backgroundColor: '#0f766e' }
fx.bg_color_teal_800{ backgroundColor: '#115e59' }
fx.bg_color_teal_900{ backgroundColor: '#134e4a' }
fx.bg_color_teal_950{ backgroundColor: '#042f2e' }
fx.bg_color_cyan_50{ backgroundColor: '#ecfeff' }
fx.bg_color_cyan_100{ backgroundColor: '#cffafe' }
fx.bg_color_cyan_200{ backgroundColor: '#a5f3fc' }
fx.bg_color_cyan_300{ backgroundColor: '#67e8f9' }
fx.bg_color_cyan_400{ backgroundColor: '#22d3ee' }
fx.bg_color_cyan_500{ backgroundColor: '#06b6d4' }
fx.bg_color_cyan_600{ backgroundColor: '#0891b2' }
fx.bg_color_cyan_700{ backgroundColor: '#0e7490' }
fx.bg_color_cyan_800{ backgroundColor: '#155e75' }
fx.bg_color_cyan_900{ backgroundColor: '#164e63' }
fx.bg_color_cyan_950{ backgroundColor: '#083344' }
fx.bg_color_sky_50{ backgroundColor: '#f0f9ff' }
fx.bg_color_sky_100{ backgroundColor: '#e0f2fe' }
fx.bg_color_sky_200{ backgroundColor: '#bae6fd' }
fx.bg_color_sky_300{ backgroundColor: '#7dd3fc' }
fx.bg_color_sky_400{ backgroundColor: '#38bdf8' }
fx.bg_color_sky_500{ backgroundColor: '#0ea5e9' }
fx.bg_color_sky_600{ backgroundColor: '#0284c7' }
fx.bg_color_sky_700{ backgroundColor: '#0369a1' }
fx.bg_color_sky_800{ backgroundColor: '#075985' }
fx.bg_color_sky_900{ backgroundColor: '#0c4a6e' }
fx.bg_color_sky_950{ backgroundColor: '#082f49' }
fx.bg_color_blue_50{ backgroundColor: '#eff6ff' }
fx.bg_color_blue_100{ backgroundColor: '#dbeafe' }
fx.bg_color_blue_200{ backgroundColor: '#bfdbfe' }
fx.bg_color_blue_300{ backgroundColor: '#93c5fd' }
fx.bg_color_blue_400{ backgroundColor: '#60a5fa' }
fx.bg_color_blue_500{ backgroundColor: '#3b82f6' }
fx.bg_color_blue_600{ backgroundColor: '#2563eb' }
fx.bg_color_blue_700{ backgroundColor: '#1d4ed8' }
fx.bg_color_blue_800{ backgroundColor: '#1e40af' }
fx.bg_color_blue_900{ backgroundColor: '#1e3a8a' }
fx.bg_color_blue_950{ backgroundColor: '#172554' }
fx.bg_color_indigo_50{ backgroundColor: '#eef2ff' }
fx.bg_color_indigo_100{ backgroundColor: '#e0e7ff' }
fx.bg_color_indigo_200{ backgroundColor: '#c7d2fe' }
fx.bg_color_indigo_300{ backgroundColor: '#a5b4fc' }
fx.bg_color_indigo_400{ backgroundColor: '#818cf8' }
fx.bg_color_indigo_500{ backgroundColor: '#6366f1' }
fx.bg_color_indigo_600{ backgroundColor: '#4f46e5' }
fx.bg_color_indigo_700{ backgroundColor: '#4338ca' }
fx.bg_color_indigo_800{ backgroundColor: '#3730a3' }
fx.bg_color_indigo_900{ backgroundColor: '#312e81' }
fx.bg_color_indigo_950{ backgroundColor: '#1e1b4b' }
fx.bg_color_violet_50{ backgroundColor: '#f5f3ff' }
fx.bg_color_violet_100{ backgroundColor: '#ede9fe' }
fx.bg_color_violet_200{ backgroundColor: '#ddd6fe' }
fx.bg_color_violet_300{ backgroundColor: '#c4b5fd' }
fx.bg_color_violet_400{ backgroundColor: '#a78bfa' }
fx.bg_color_violet_500{ backgroundColor: '#8b5cf6' }
fx.bg_color_violet_600{ backgroundColor: '#7c3aed' }
fx.bg_color_violet_700{ backgroundColor: '#6d28d9' }
fx.bg_color_violet_800{ backgroundColor: '#5b21b6' }
fx.bg_color_violet_900{ backgroundColor: '#4c1d95' }
fx.bg_color_violet_950{ backgroundColor: '#2e1065' }
fx.bg_color_purple_50{ backgroundColor: '#faf5ff' }
fx.bg_color_purple_100{ backgroundColor: '#f3e8ff' }
fx.bg_color_purple_200{ backgroundColor: '#e9d5ff' }
fx.bg_color_purple_300{ backgroundColor: '#d8b4fe' }
fx.bg_color_purple_400{ backgroundColor: '#c084fc' }
fx.bg_color_purple_500{ backgroundColor: '#a855f7' }
fx.bg_color_purple_600{ backgroundColor: '#9333ea' }
fx.bg_color_purple_700{ backgroundColor: '#7e22ce' }
fx.bg_color_purple_800{ backgroundColor: '#6b21a8' }
fx.bg_color_purple_900{ backgroundColor: '#581c87' }
fx.bg_color_purple_950{ backgroundColor: '#3b0764' }
fx.bg_color_fuchsia_50{ backgroundColor: '#fdf4ff' }
fx.bg_color_fuchsia_100{ backgroundColor: '#fae8ff' }
fx.bg_color_fuchsia_200{ backgroundColor: '#f5d0fe' }
fx.bg_color_fuchsia_300{ backgroundColor: '#f0abfc' }
fx.bg_color_fuchsia_400{ backgroundColor: '#e879f9' }
fx.bg_color_fuchsia_500{ backgroundColor: '#d946ef' }
fx.bg_color_fuchsia_600{ backgroundColor: '#c026d3' }
fx.bg_color_fuchsia_700{ backgroundColor: '#a21caf' }
fx.bg_color_fuchsia_800{ backgroundColor: '#86198f' }
fx.bg_color_fuchsia_900{ backgroundColor: '#701a75' }
fx.bg_color_fuchsia_950{ backgroundColor: '#4a044e' }
fx.bg_color_pink_50{ backgroundColor: '#fdf2f8' }
fx.bg_color_pink_100{ backgroundColor: '#fce7f3' }
fx.bg_color_pink_200{ backgroundColor: '#fbcfe8' }
fx.bg_color_pink_300{ backgroundColor: '#f9a8d4' }
fx.bg_color_pink_400{ backgroundColor: '#f472b6' }
fx.bg_color_pink_500{ backgroundColor: '#ec4899' }
fx.bg_color_pink_600{ backgroundColor: '#db2777' }
fx.bg_color_pink_700{ backgroundColor: '#be185d' }
fx.bg_color_pink_800{ backgroundColor: '#9d174d' }
fx.bg_color_pink_900{ backgroundColor: '#831843' }
fx.bg_color_pink_950{ backgroundColor: '#500724' }
fx.bg_color_rose_50{ backgroundColor: '#fff1f2' }
fx.bg_color_rose_100{ backgroundColor: '#ffe4e6' }
fx.bg_color_rose_200{ backgroundColor: '#fecdd3' }
fx.bg_color_rose_300{ backgroundColor: '#fda4af' }
fx.bg_color_rose_400{ backgroundColor: '#fb7185' }
fx.bg_color_rose_500{ backgroundColor: '#f43f5e' }
fx.bg_color_rose_600{ backgroundColor: '#e11d48' }
fx.bg_color_rose_700{ backgroundColor: '#be123c' }
fx.bg_color_rose_800{ backgroundColor: '#9f1239' }
fx.bg_color_rose_900{ backgroundColor: '#881337' }
fx.bg_color_rose_950{ backgroundColor: '#4c0519' }

Custom Overlay Colors​

Custom properties are usually rendered using _(customValue)

ObjectNative Properties
fx.bg_color_(customColor){ backgroundColor: 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)
CAUTION

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