How to Use Hexadecimal Color Codes in Flutter

Flutter's Color class expects an 8-digit ARGB hexadecimal value, not the familiar 6-digit RGB format used in CSS and most web design tools — this mismatch is a common early point of confusion worth understanding directly.

The 8-digit ARGB format

Color(0xFF6366F1)

The full value breaks down as 0xAARRGGBB — FF for full opacity (alpha), followed by 63 (red), 66 (green), and F1 (blue) — the leading 0x tells Dart this is a hexadecimal literal, and the FF alpha prefix is what web developers most often forget when porting a color value over from a web project.

Converting a standard 6-digit web hex color

// web: #6366F1
// Flutter equivalent, adding FF for full opacity:
Color(0xFF6366F1)

Simply prepending 0xFF to a standard 6-digit web hex code (dropping the #) is the direct conversion for a fully opaque color — this is the fix for the single most common Flutter color mistake, using a bare 6-digit value that Dart interprets incorrectly.

Using a color with partial transparency

Color(0x806366F1) // 0x80 is roughly 50% opacity

The alpha byte ranges from 00 (fully transparent) to FF (fully opaque) — 0x80 is approximately the halfway point, since hexadecimal 80 is 128 out of a maximum 255.

Using withOpacity() for a more readable alternative

Color(0xFF6366F1).withOpacity(0.5)

withOpacity() takes a standard 0.0–1.0 decimal value, which is often more readable and intuitive than calculating and encoding the exact alpha hex byte manually — both approaches produce the same practical result.

Defining reusable color constants

class AppColors {
    static const primary = Color(0xFF6366F1);
    static const secondary = Color(0xFF10B981);
    static const danger = Color(0xFFEF4444);
}

Container(color: AppColors.primary)

Centralizing color definitions in one class, rather than repeating raw hex values throughout the codebase, makes a future design change (updating a brand color) a single-location edit instead of a project-wide find-and-replace.

Converting a color from a string at runtime (e.g., from an API response)

Color hexToColor(String hexString) {
    final buffer = StringBuffer();
    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
    buffer.write(hexString.replaceFirst('#', ''));
    return Color(int.parse(buffer.toString(), radix: 16));
}

final color = hexToColor('#6366F1'); // handles a standard web-style hex string

This helper handles the common case of receiving a standard 6-digit web-style hex string (from an API or a CMS, for instance) and converting it to the 8-digit ARGB format Flutter's Color constructor actually requires.