Open In App

React.js Blueprint Colors

Improve
Improve
Like Article
Like
Save
Share
Report

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss React.js Blueprint Colors. Colors are a very important component used in styling a web application. The React.js Blueprint provides different types of color schemes that can be used while styling a web application.

Blueprint Colors Usage:

  • Blueprint in Sass: Blueprint colors are used in Sass scripting language which is a preprocessor style sheet language compiled into CSS.
  • Blueprint in Less: Blueprint colors are used in Less which is a dynamic preprocessor style sheet language compiled into CSS.
  • Blueprint in JavaScript: Blueprint colors are used in JavaScript as Blueprint is React based library which uses JavaScript.

1. Gray scale: Grayscale colors are different shades of gray color available to design web pages. This is discussed in this article.

2. Core colors: The core colors are used in user interface design and each color is linked to what we call a visual intent. This is discussed in this article.

3. Extended colors: We use extended colors when we need to represent some kind of data. So basically it is reserved for data visualization.

Syntax:

<div style={{ backgroundColor: "#96290D" }}>...</div>
<h1 style={{ color: "#DB2C6F" }}>...</h1>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. app name, move to it using the following command:

cd appname

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure:

 

Example 1: Below example demonstrates the usage of Extended color as the background color.

Javascript




import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
  
function App() {
    return (
        <>
            <div>
                <h1>
                    ReactJS BluePrint Colors Extended colors
                </h1>
            </div>
            <div style={{
                display: "flex",
                flexDirection: "row"
            }}>
                <div style={{ color: "black", padding: 20 }}>
                    <div style={{ padding: 10 }}>
                        <div
                            style={{
                                padding: 10,
                                backgroundColor: "#96290D",
                                color: "white",
                            }}
                        >
                            Vermilion -1
                        </div>
                        <div
                            style={{
                                padding: 10,
                                backgroundColor: "#B83211",
                                color: "white",
                            }}
                        >
                            Vermilion -2
                        </div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#D33D17"
                        }}>
                            Vermilion -3
                        </div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#EB6847"
                        }}>
                            Vermilion -4
                        </div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#FF9980"
                        }}>
                            Vermilion -5
                        </div>
                    </div>
                </div>
                <div style={{
                    color: "black",
                    textAlign: "left", padding: 20
                }}>
                    <div style={{ padding: 10 }}>
                        <div
                            style={{
                                padding: 10,
                                backgroundColor: "#A82255",
                                color: "white",
                            }}
                        >
                            Rose -1
                        </div>
                        <div
                            style={{
                                padding: 10,
                                backgroundColor: "#C22762",
                                color: "white",
                            }}
                        >
                            Rose -2
                        </div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#DB2C6F"
                        }}>Rose -3</div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#F5498B"
                        }}>Rose -4</div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#FF66A1"
                        }}>Rose -5</div>
                    </div>
                </div>
                <div style={{
                    color: "black",
                    textAlign: "left", padding: 20
                }}>
                    <div style={{ padding: 10 }}>
                        <div
                            style={{
                                padding: 10,
                                backgroundColor: "#5C255C",
                                color: "white",
                            }}
                        >
                            Voilet-1
                        </div>
                        <div
                            style={{
                                padding: 10,
                                backgroundColor: "#7C327C",
                                color: "white",
                            }}
                        >
                            Voilet-2
                        </div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#9D3F9D"
                        }}>
                            Voilet-3
                        </div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#BD6BBD"
                        }}>
                            Voilet-4
                        </div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#D69FD6"
                        }}>
                            Voilet-5
                        </div>
                    </div>
                </div>
                <div style={{
                    color: "black",
                    textAlign: "left",
                    padding: 20
                }}>
                    <div style={{ padding: 10 }}>
                        <div
                            style={{
                                padding: 10,
                                backgroundColor: "#5642A6",
                                color: "white",
                            }}
                        >
                            Indigo-1
                        </div>
                        <div
                            style={{
                                padding: 10,
                                backgroundColor: "#634DBF",
                                color: "white",
                            }}
                        >
                            Indigo-2
                        </div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#7961DB"
                        }}>
                            Indigo-3
                        </div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#9881F3"
                        }}>
                            Indigo-4
                        </div>
                        <div style={{
                            padding: 10,
                            backgroundColor: "#BDADFF"
                        }}>
                            Indigo-5
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}
  
export default App;


Step to run the application: Open the terminal and type the following command.

npm start

Output:

 

Example 2: Below example demonstrates the usage of Extended color as the text typography color.

Javascript




import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
  
function App() {
    return (
        <>
            <div style={{
                padding: 20,
                color: "green"
            }}>
                <h1>ReactJS BluePrint Colors Extended Colors</h1>
            </div>
            <div>
                <div style={{
                    padding: 20, display: "flex",
                    flexDirection: "row"
                }}>
                    <div style={{ padding: 10 }}>
                        <h1 style={{ color: "#0C5174" }}>
                            Cerulean color 1
                        </h1>
                        <h2 style={{ color: "#0F6894" }}>
                            Cerulean color 2
                        </h2>
                        <h3 style={{ color: "#147EB3" }}>
                            Cerulean color 3
                        </h3>
                        <h4 style={{ color: "#3FA6DA" }}>
                            Cerulean color 4
                        </h4>
                        <h5 style={{ color: "#68C1EE" }}>
                            Cerulean color 5
                        </h5>
                    </div>
                    <div style={{ padding: 10 }}>
                        <h1 style={{ color: "#004D46" }}>
                            Turquoise color 1
                        </h1>
                        <h2 style={{ color: "#007067" }}>
                            Turquoise color 2
                        </h2>
                        <h3 style={{ color: "#00A396" }}>
                            Turquoise color 3
                        </h3>
                        <h4 style={{ color: "#13C9BA" }}>
                            Turquoise color 4
                        </h4>
                        <h5 style={{ color: "#7AE1D8" }}>
                            Turquoise color 5
                        </h5>
                    </div>
                    <div style={{ padding: 10 }}>
                        <h1 style={{ color: "#1D7324" }}>
                            Forest Color 1
                        </h1>
                        <h2 style={{ color: "#238C2C" }}>
                            Forest Color 2
                        </h2>
                        <h3 style={{ color: "#29A634" }}>
                            Forest Color 3
                        </h3>
                        <h4 style={{ color: "#43BF4D" }}>
                            Forest Color 4
                        </h4>
                        <h5 style={{ color: "#62D96B" }}>
                            Forest Color 5
                        </h5>
                    </div>
                    <div style={{ padding: 10 }}>
                        <h1 style={{ color: "#43501B" }}>
                            Lime Color 1
                        </h1>
                        <h2 style={{ color: "#5A701A" }}>
                            Lime Color 2
                        </h2>
                        <h3 style={{ color: "#8EB125" }}>
                            Lime Color 3
                        </h3>
                        <h4 style={{ color: "#B6D94C" }}>
                            Lime Color 4
                        </h4>
                        <h5 style={{ color: "#D4F17E" }}>
                            Lime Color 5
                        </h5>
                    </div>
                </div>
            </div>
        </>
    );
}
  
export default App;


Output:

 

Reference: https://blueprintjs.com/docs/#core/colors



Last Updated : 02 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads