Generate Flutter Colors from Hex Code

Flutter Color from hex generator

hex

Color in Flutter format:

Color(0xFFFFFFFF)

Usage

To use a color from a hexadecimal code in Flutter, you can use the Color class from the dart:ui library. This class has a constructor that takes a hexadecimal string as an argument.

import 'dart:ui';

Color myColor = Color(0xFFFFFFFF);

Understanding the Color and ColorSwatch classes in Flutter

Color class

In Flutter, the Color class is used to represent a single color value. It can be created using a hex code, RGB values, or one of the predefined colors in the MaterialColor class, such as Colors.red or Colors.blue. The Color class also has various methods for manipulating and transforming the color, such as withOpacity for adjusting the transparency of the color or withHue for changing the hue value.

// Color from Hexcode
Color colorFromHex = const Color(0xFF42A5F5);
// Color from RGB
Color colorFromARGB = const Color.fromARGB(255, 66, 165, 245);
Color colorFromRGBO = const Color.fromRGBO(66, 165, 245, 1.0);
// MaterialColor
Color red =  Colors.red;
 
// Red with only 50% opacity
Color red =  Colors.red.withOpacity(0.5);

// Color from Hexcode
Color colorFromHex = const Color(0xFF42A5F5);
// Color from RGB
Color colorFromARGB = const Color.fromARGB(255, 66, 165, 245);
Color colorFromRGBO = const Color.fromRGBO(66, 165, 245, 1.0);
// MaterialColor
Color red =  Colors.red;
 
// Red with only 50% opacity
Color red =  Colors.red.withOpacity(0.5);

Color from RGB

// Color from ARGB -- A = alpha
Color colorFromARGB = const Color.fromARGB(255, 66, 165, 245);
Color colorFromRGBO = const Color.fromRGBO(66, 165, 245, 1.0);

// Color from ARGB -- A = alpha
Color colorFromARGB = const Color.fromARGB(255, 66, 165, 245);
Color colorFromRGBO = const Color.fromRGBO(66, 165, 245, 1.0);

To get a color from RGB values in Flutter, you can use the Color.fromRGBO method. This method takes three integers as arguments: red, green, and blue, which represent the intensity of each color channel in the range 0-255. It also takes an optional opacity argument, which is a double value in the range 0.0-1.0 representing the transparency of the color.

Color.fromRGBO Example

Here is an example of how you can use Color.fromRGBO() to obtain a color from RGB values.

Color colorFromRGBO = const Color.fromRGBO(255, 0, 0, 1.0);

Color colorFromRGBO = const Color.fromRGBO(255, 0, 0, 1.0);

This will create a fully opaque red color.

Color.fromRGBA Example

You can also use the Color.fromARGB method, which takes four integers as arguments: alpha, red, green, and blue. The alpha value represents the transparency of the color in the range 0-255, with 0 being fully transparent and 255 being fully opaque.

Here is an example of how you can use Color.fromARGB() to obtain a color from RGB values.

Color color = Color.fromARGB(255, 255, 0, 0);

Color color = Color.fromARGB(255, 255, 0, 0);

This will create a fully opaque red color.

ColorSwatch class

The ColorSwatch class is a collection of colors that are intended to be used together to define the color scheme of a user interface. It is defined using a primary color and then generates a set of derived colors based on that primary color. For example, Colors.blue is a ColorSwatch that generates a range of shades of blue, including Colors.blue[50] for a light blue and Colors.blue[900] for a very dark blue.

Blue ColorSwatch

Create your own ColorSwatch

const int _primaryColor = 0xFF3F51B5;
final myCustomSwatch = const MaterialColor(_primaryColor, <int, Color>{
    50: Color(0xFFE8EAF6),
    100: Color(0xFFC5CAE9),
    200: Color(0xFF9FA8DA),
    300: Color(0xFF7986CB),
    400: Color(0xFF5C6BC0),
    500: Color(_primaryColor),
    600: Color(0xFF3949AB),
    700: Color(0xFF303F9F),
    800: Color(0xFF283593),
    900: Color(0xFF1A237E),
});

const int _primaryColor = 0xFF3F51B5;
final myCustomSwatch = const MaterialColor(_primaryColor, <int, Color>{
    50: Color(0xFFE8EAF6),
    100: Color(0xFFC5CAE9),
    200: Color(0xFF9FA8DA),
    300: Color(0xFF7986CB),
    400: Color(0xFF5C6BC0),
    500: Color(_primaryColor),
    600: Color(0xFF3949AB),
    700: Color(0xFF303F9F),
    800: Color(0xFF283593),
    900: Color(0xFF1A237E),
});

In this example, the ColorSwatch is created with a primary color of 0xFF3F51B5 and a range of shades from 50 to 900. You can specify the colors for each shade by providing a map of shade values to Color objects.

You can then use your custom ColorSwatch in your Flutter app by specifying it as the color or backgroundColor property of a widget. For example:

Container(
  color: myCustomSwatch[500],
  child: Text('Hello World'),
)

Container(
  color: myCustomSwatch[500],
  child: Text('Hello World'),
)

This will create a container with a background color of the 500 shade of your custom ColorSwatch. A easy way to create your own ColorSwatch is by using this website: ColorSwatch generetor website

Flutter change color of text

To change the color of text in Flutter, use the Text widget's style property and set the color property of the TextStyle object. For example:

Text(
  'This is some text',
  style: TextStyle(
    color: Colors.red,
  ),
)

Text(
  'This is some text',
  style: TextStyle(
    color: Colors.red,
  ),
)

Alternative use TextTheme

Alternatively, you can use a Theme to define the default text color for an entire app or a specific part. To override the default, provide a TextStyle with a different color to a Text widget. For example.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(color: Colors.black),
        ),
      ),
      home: MyHomePage(),
    );
  }
}
 
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          'This is some text',
          style: Theme.of(context).textTheme.bodyText1,
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(color: Colors.black),
        ),
      ),
      home: MyHomePage(),
    );
  }
}
 
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          'This is some text',
          style: Theme.of(context).textTheme.bodyText1,
        ),
      ),
    );
  }
}

Conwclusion

In conclusion, Flutter offers a variety of tools and APIs to work with colors in your app. The Color.fromHex method creates a Color object from a hexadecimal string, while the Color.fromRGBO method creates a Color object from individual red, green, and blue component values. These tools make it easy to incorporate color into your Flutter app and create visually appealing and engaging user interfaces.

Jonas Rodehorst