colors palette

★★☆☆by Ramon Santamaria (@raysan5)

There is no browser build of this example yet.

Is it the same as C?

Desktop:verified The Zig version renders a final frame that is byte-identical to the C example.
Browser:verified In headless Chrome, the Zig version gives a final frame byte-identical to the C example built for the web.

ZigC (original)

//! raylib [shapes] example - colors palette
//!
//! Zig-API translation of examples/shapes/shapes_colors_palette.c (raylib 6.2).
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2014-2025 Ramon Santamaria (@raysan5)

const rl = @import("raylib");

const NamedColor = struct { color: rl.Color, name: [:0]const u8 };

const palette = [_]NamedColor{
    .{ .color = .dark_gray, .name = "DARKGRAY" },
    .{ .color = .maroon, .name = "MAROON" },
    .{ .color = .orange, .name = "ORANGE" },
    .{ .color = .dark_green, .name = "DARKGREEN" },
    .{ .color = .dark_blue, .name = "DARKBLUE" },
    .{ .color = .dark_purple, .name = "DARKPURPLE" },
    .{ .color = .dark_brown, .name = "DARKBROWN" },
    .{ .color = .gray, .name = "GRAY" },
    .{ .color = .red, .name = "RED" },
    .{ .color = .gold, .name = "GOLD" },
    .{ .color = .lime, .name = "LIME" },
    .{ .color = .blue, .name = "BLUE" },
    .{ .color = .violet, .name = "VIOLET" },
    .{ .color = .brown, .name = "BROWN" },
    .{ .color = .light_gray, .name = "LIGHTGRAY" },
    .{ .color = .pink, .name = "PINK" },
    .{ .color = .yellow, .name = "YELLOW" },
    .{ .color = .green, .name = "GREEN" },
    .{ .color = .sky_blue, .name = "SKYBLUE" },
    .{ .color = .purple, .name = "PURPLE" },
    .{ .color = .beige, .name = "BEIGE" },
};

pub fn main() void {
    // Initialization
    const screen_width = 800;
    const screen_height = 450;

    rl.initWindow(screen_width, screen_height, "raylib [shapes] example - colors palette");
    defer rl.closeWindow(); // Close window and OpenGL context

    // Fills colors_recs data (for every rectangle)
    var colors_recs: [palette.len]rl.Rectangle = undefined;
    for (&colors_recs, 0..) |*rec, i| {
        const col: f32 = @floatFromInt(i % 7);
        const row: f32 = @floatFromInt(i / 7);
        const fi: f32 = @floatFromInt(i);
        rec.* = .{
            .x = 20.0 + 100.0 * col + 10.0 * col,
            .y = 80.0 + 100.0 * row + 10.0 * (fi / 7),
            .width = 100.0,
            .height = 100.0,
        };
    }

    var hovered: [palette.len]bool = @splat(false); // Color state: mouse hover

    rl.setTargetFPS(60); // Set our game to run at 60 frames-per-second

    // Main game loop
    while (!rl.windowShouldClose()) { // Detect window close button or ESC key
        // Update
        const mouse_point = rl.getMousePosition();

        for (&hovered, colors_recs) |*h, rec| h.* = rl.checkCollisionPointRec(mouse_point, rec);

        // Draw
        rl.beginDrawing();
        defer rl.endDrawing();

        rl.clearBackground(.ray_white);

        rl.drawText("raylib colors palette", 28, 42, 20, .black);
        rl.drawText("press SPACE to see all colors", rl.getScreenWidth() - 180, rl.getScreenHeight() - 40, 10, .gray);

        for (palette, colors_recs, hovered) |entry, rec, hover| { // Draw all rectangles
            rl.drawRectangleRec(rec, rl.fade(entry.color, if (hover) 0.6 else 1.0));

            if (rl.isKeyDown(.space) or hover) {
                rl.drawRectangle(@intFromFloat(rec.x), @intFromFloat(rec.y + rec.height - 26), @intFromFloat(rec.width), 20, .black);
                rl.drawRectangleLinesEx(rec, 6, rl.fade(.black, 0.3));
                const text_width: f32 = @floatFromInt(rl.measureText(entry.name, 10));
                rl.drawText(entry.name, @intFromFloat(rec.x + rec.width - text_width - 12), @intFromFloat(rec.y + rec.height - 20), 10, entry.color);
            }
        }
    }
}

/*******************************************************************************************
*
*   raylib [shapes] example - colors palette
*
*   Example complexity rating: [★★☆☆] 2/4
*
*   Example originally created with raylib 1.0, last time updated with raylib 2.5
*
*   Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
*   BSD-like license that allows static linking with closed source software
*
*   Copyright (c) 2014-2025 Ramon Santamaria (@raysan5)
*
********************************************************************************************/

#include "raylib.h"

#define MAX_COLORS_COUNT    21          // Number of colors available

//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
    // Initialization
    //--------------------------------------------------------------------------------------
    const int screenWidth = 800;
    const int screenHeight = 450;

    InitWindow(screenWidth, screenHeight, "raylib [shapes] example - colors palette");

    Color colors[MAX_COLORS_COUNT] = {
        DARKGRAY, MAROON, ORANGE, DARKGREEN, DARKBLUE, DARKPURPLE, DARKBROWN,
        GRAY, RED, GOLD, LIME, BLUE, VIOLET, BROWN, LIGHTGRAY, PINK, YELLOW,
        GREEN, SKYBLUE, PURPLE, BEIGE };

    const char *colorNames[MAX_COLORS_COUNT] = {
        "DARKGRAY", "MAROON", "ORANGE", "DARKGREEN", "DARKBLUE", "DARKPURPLE",
        "DARKBROWN", "GRAY", "RED", "GOLD", "LIME", "BLUE", "VIOLET", "BROWN",
        "LIGHTGRAY", "PINK", "YELLOW", "GREEN", "SKYBLUE", "PURPLE", "BEIGE" };

    Rectangle colorsRecs[MAX_COLORS_COUNT] = { 0 };     // Rectangles array

    // Fills colorsRecs data (for every rectangle)
    for (int i = 0; i < MAX_COLORS_COUNT; i++)
    {
        colorsRecs[i].x = 20.0f + 100.0f *(i%7) + 10.0f *(i%7);
        colorsRecs[i].y = 80.0f + 100.0f *((int)i/7) + 10.0f *((float)i/7);
        colorsRecs[i].width = 100.0f;
        colorsRecs[i].height = 100.0f;
    }

    int colorState[MAX_COLORS_COUNT] = { 0 };           // Color state: 0-DEFAULT, 1-MOUSE_HOVER

    Vector2 mousePoint = { 0.0f, 0.0f };

    SetTargetFPS(60);               // Set our game to run at 60 frames-per-second
    //--------------------------------------------------------------------------------------

    // Main game loop
    while (!WindowShouldClose())    // Detect window close button or ESC key
    {
        // Update
        //----------------------------------------------------------------------------------
        mousePoint = GetMousePosition();

        for (int i = 0; i < MAX_COLORS_COUNT; i++)
        {
            if (CheckCollisionPointRec(mousePoint, colorsRecs[i])) colorState[i] = 1;
            else colorState[i] = 0;
        }
        //----------------------------------------------------------------------------------

        // Draw
        //----------------------------------------------------------------------------------
        BeginDrawing();

            ClearBackground(RAYWHITE);

            DrawText("raylib colors palette", 28, 42, 20, BLACK);
            DrawText("press SPACE to see all colors", GetScreenWidth() - 180, GetScreenHeight() - 40, 10, GRAY);

            for (int i = 0; i < MAX_COLORS_COUNT; i++)    // Draw all rectangles
            {
                DrawRectangleRec(colorsRecs[i], Fade(colors[i], colorState[i]? 0.6f : 1.0f));

                if (IsKeyDown(KEY_SPACE) || colorState[i])
                {
                    DrawRectangle((int)colorsRecs[i].x, (int)(colorsRecs[i].y + colorsRecs[i].height - 26), (int)colorsRecs[i].width, 20, BLACK);
                    DrawRectangleLinesEx(colorsRecs[i], 6, Fade(BLACK, 0.3f));
                    DrawText(colorNames[i], (int)(colorsRecs[i].x + colorsRecs[i].width - MeasureText(colorNames[i], 10) - 12),
                        (int)(colorsRecs[i].y + colorsRecs[i].height - 20), 10, colors[i]);
                }
            }

        EndDrawing();
        //----------------------------------------------------------------------------------
    }

    // De-Initialization
    //--------------------------------------------------------------------------------------
    CloseWindow();                // Close window and OpenGL context
    //--------------------------------------------------------------------------------------

    return 0;
}

From raylib 6.2. The original on GitHub.