FunUi Framework

Enhance your website's appeal by incorporating cool and amazing CSS colors. Choosing great colors will not only make your website look awesome but also leave a lasting and impressive impact on your visitors.

Home

Colors

Background Color

You have the flexibility to change the background color of your element by simply assigning any of the listed colors as a class to the 'funcss' prop. Just use the desired color class value, and the background color will be updated accordingly.

React / Next.js

Set your Application theme

Wrap your entire application with <ThemeProvider> to enable global styling using FunUi's theming system. This provides consistent colors, spacing, and typography across all components. You typically use this in your main layout file to apply the theme throughout the app. You can set the theme to 'light' | 'dark' | 'dark-blue' | 'light-gray'

import { DM_Sans } from "next/font/google";
          import "funuicss/css/fun.css";
          import { ThemeProvider } from "funuicss";

          const font = DM_Sans({
            subsets: ["latin", "latin-ext"],
            weight: ["300", "400", "500", "600", "700", "800", "900"],
          });

          export const metadata = {
            title: "App Title",
            description: "App's description",
          };

          export default function RootLayout({ children }) {
            return (
              <html lang="en">
                  <body className={font.className}>
                    <ThemeProvider theme="light">
                      {children}
                    </ThemeProvider>
                  </body>
              </html>
            );
          }

Generate a Theme

Use this tool to generate a theme for your website. You can then use these colors in your CSS file to create a consistent look and feel for your website.

Primary:

Secondary:

Accent:

Primary Shades

primary

#6366f1

primary50

#ffffff

primary100

#ffffff

primary200

#eff0fe

primary300

#c1c2f9

primary400

#9294f5

primary500

#6366f1

primary600

#3438ed

primary700

#1418da

primary800

#0f13ac

primary900

#0b0e7d

Secondary Shades

secondary

#ec4899

secondary50

#ffffff

secondary100

#ffffff

secondary200

#fad3e6

secondary300

#f6a4cc

secondary400

#f176b3

secondary500

#ec4899

secondary600

#e71a7f

secondary700

#bb1366

secondary800

#8c0f4d

secondary900

#5e0a33

Accent Shades

accent

#ffc300

accent50

#fff9e5

accent100

#fff3cc

accent200

#ffe799

accent300

#ffdb66

accent400

#ffcf33

accent500

#ffc300

accent600

#cc9c00

accent700

#997500

accent800

#664e00

accent900

#332700

:root {
/* Primary Colors */
--primary: #6366F1;
--primary50: #FFFFFF;
--primary100: #FFFFFF;
--primary200: #EFF0FE;
--primary300: #C1C2F9;
--primary400: #9294F5;
--primary500: #6366F1;
--primary600: #3438ED;
--primary700: #1418DA;
--primary800: #0F13AC;
--primary900: #0B0E7D;

/* Secondary Colors */
--secondary: #EC4899;
--secondary50: #FFFFFF;
--secondary100: #FFFFFF;
--secondary200: #FAD3E6;
--secondary300: #F6A4CC;
--secondary400: #F176B3;
--secondary500: #EC4899;
--secondary600: #E71A7F;
--secondary700: #BB1366;
--secondary800: #8C0F4D;
--secondary900: #5E0A33;

/* Accent Colors */
--accent: #FFC300;
--accent50: #FFF9E5;
--accent100: #FFF3CC;
--accent200: #FFE799;
--accent300: #FFDB66;
--accent400: #FFCF33;
--accent500: #FFC300;
--accent600: #CC9C00;
--accent700: #997500;
--accent800: #664E00;
--accent900: #332700;
}

Our Colors

Below are the color names and codes of all the colors available in the framework, you can simply use or change any of the colors listed below.

primary

#6366f1

primary50

#eef2ff

primary100

#e0e7ff

primary200

#c7d2fe

primary300

#a5b4fc

primary400

#818cf8

primary500

#6366f1

primary600

#4f46e5

primary700

#4338ca

primary800

#3730a3

primary900

#312e81

secondary

#ec4899

secondary50

#fdf2f8

secondary100

#fce7f3

secondary200

#fbcfe8

secondary300

#f9a8d4

secondary400

#f472b6

secondary500

#ec4899

secondary600

#db2777

secondary700

#be185d

secondary800

#9d174d

secondary900

#831843

accent

#ffc300

accent50

#fff9e6

accent100

#fff3cc

accent200

#ffe999

accent300

#ffdf66

accent400

#ffd633

accent500

#ffc300

accent600

#e6af00

accent700

#cc9c00

accent800

#b38800

accent900

#8f6e00

error

#ef4444

error50

#fef2f2

error100

#fee2e2

error200

#fecaca

error300

#fca5a5

error400

#f87171

error500

#ef4444

error600

#dc2626

error700

#b91c1c

error800

#991b1b

error900

#7f1d1d

success

#22c55e

success50

#f0fdf4

success100

#dcfce7

success200

#bbf7d0

success300

#86efac

success400

#4ade80

success500

#22c55e

success600

#16a34a

success700

#15803d

success800

#166534

success900

#14532d

warning

#fb923c

warning50

#fff7ed

warning100

#ffedd5

warning200

#fed7aa

warning300

#fdba74

warning400

#fb923c

warning500

#f97316

warning600

#ea580c

warning700

#c2410c

warning800

#9a3412

warning900

#7c2d12

info

#0ea5e9

info50

#f0f9ff

info100

#e0f2fe

info200

#bae6fd

info300

#7dd3fc

info400

#38bdf8

info500

#0ea5e9

info600

#0284c7

info700

#0369a1

info800

#075985

info900

#0c4a6e

dark

#71717a

white

#FFFFFF

black

#000000

muted

#78716c

getting Started

Text