Thursday, October 9, 2025
HomeLanguagesReact.js Blueprint Colors Color schemes

React.js Blueprint Colors Color schemes

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 Color schemes. 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 Schemes:

  • Sequential color schemes: This color scheme is best suited for representing data that ranges from low-to-high values either on an ordinal or on a numerical scale.
  • Diverging color schemes: This color scheme put equal weightage on the mid-range and extreme values at both ends of the data range.
  • Qualitative color schemes: This color scheme uses a series of unrelated colors to make a scheme that does not imply order, merely a difference in kind.

 

Syntax:

<div style={{ backgroundColor: "#2D72D2" }}>...</div>
<h3 style={{ color: "#77450D" }}>...</h3>

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. appname, 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 the Sequential Color Scheme.

Javascript




import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
  
function App() {
    return (
        <>
            <div style={{ padding: 20, textAlign: "center"
                color: "green" }}>
                <h1>ReactJS BluePrint Colors Color schemes</h1>
            </div>
            <div>
                <h2 style={{ textAlign: "center"
                    color: "green" }}>
                    Sequential Color Scheme
                </h2>
                <div style={{ padding: 20, display: "flex",
                    flexDirection: "row" }}>
                    <div style={{ padding: 10 }}>
                        <div style={{ backgroundColor: "#CFF3D2",
                            padding: 20 }}>
                            #CFF3D2
                        </div>
                        <div style={{ backgroundColor: "#8BCDBC",
                            padding: 20 }}>
                            #8BCDBC
                        </div>
                        <div style={{ backgroundColor: "#59A3AC",
                            padding: 20 }}>
                            #59A3AC
                        </div>
                        <div style={{ backgroundColor: "#3878A1",
                            padding: 20 }}>
                            #3878A1
                        </div>
                        <div style={{ backgroundColor: "#1F4B99",
                            padding: 20 }}>
                            #1F4B99
                        </div>
                    </div>
                    <div style={{ padding: 10 }}>
                        <div style={{ backgroundColor: "#97F3EB",
                            padding: 20 }}>
                            #CFF3D2
                        </div>
                        <div style={{ backgroundColor: "#78D5CC",
                            padding: 20 }}>
                            #8BCDBC
                        </div>
                        <div style={{ backgroundColor: "#58B8AE",
                            padding: 20 }}>
                            #59A3AC
                        </div>
                        <div style={{ backgroundColor: "#369C91",
                            padding: 20 }}>
                            #3878A1
                        </div>
                        <div style={{ backgroundColor: "#008075",
                            padding: 20 }}>
                            #1F4B99
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}
  
export default App;


Output:

 

Example 2: Below example demonstrates the usage of the Diverging Color Scheme.

Javascript




import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
  
function App() {
    return (
        <>
            <div style={{
                padding: 20, textAlign: "center",
                color: "green"
            }}>
                <h1>ReactJS BluePrint Colors Color schemes</h1>
            </div>
            <div>
                <h2 style={{ textAlign: "center", color: "green" }}>
                    Diverging Color Scheme
                </h2>
                <div style={{
                    padding: 20, display: "flex",
                    flexDirection: "row"
                }}>
                    <div style={{
                        display: 'flex', flexDirection: 'column',
                        paddingRight: 10
                    }}>
                        <div style={{
                            backgroundColor: '#1F4B99',
                            padding: 20,
                            color: 'white'
                        }}>
                            #1F4B99
                        </div>
                        <div style={{
                            backgroundColor: '#6CACB9', padding: 20,
                            color: 'white'
                        }}>
                            #6CACB9
                        </div>
                        <div style={{
                            backgroundColor: '#FFFFFF', padding: 20,
                            color: 'black'
                        }}>
                            #FFFFFF
                        </div>
                        <div style={{
                            backgroundColor: '#DF9563', padding: 20,
                            color: 'white'
                        }}>
                            #DF9563
                        </div>
                        <div style={{
                            backgroundColor: '#9E2B0E', padding: 20,
                            color: 'white'
                        }}>
                            #9E2B0E
                        </div>
                    </div>
                    <div style={{
                        display: 'flex', flexDirection:
                            'column', paddingRight: 10
                    }}>
                        <div style={{
                            backgroundColor: '#1D7324',
                            padding: 20, color: 'white'
                        }}>
                            #1D7324
                        </div>
                        <div style={{
                            backgroundColor: '#8BAE44',
                            padding: 20, color: 'white'
                        }}>
                            #8BAE44
                        </div>
                        <div style={{
                            backgroundColor: '#FFE39F',
                            padding: 20, color: 'white'
                        }}>
                            #FFE39F
                        </div>
                        <div style={{
                            backgroundColor: '#6B9FA1',
                            padding: 20, color: 'white'
                        }}>
                            #6B9FA1
                        </div>
                        <div style={{
                            backgroundColor: '#1F4B99',
                            padding: 20, color: 'white'
                        }}>
                            #1F4B99
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}
  
export default App;


Output:

 

Example 3: Below example demonstrates the usage of the Qualitative Color Scheme.

Javascript




import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
  
function App() {
    return (
        <>
            <div style={{ padding: 20, textAlign: "center",
                color: "green" }}>
                <h1>ReactJS BluePrint Colors Color schemes</h1>
            </div>
            <div>
                <h2 style={{ textAlign: "center", color: "green" }}>
                    Qualitative Color Scheme
                </h2>
                <div style={{ padding: 20, display: "flex"
                    flexDirection: "row" }}>
                    <div
                        style={{ backgroundColor: "#147EB3"
                        padding: 20, color: "white" }}
                    >
                        #147EB3
                    </div>
                    <div
                        style={{ backgroundColor: "#29A634",
                        padding: 20, color: "white" }}
                    >
                        #147EB3
                    </div>
                    <div
                        style={{ backgroundColor: "#D1980B"
                        padding: 20, color: "white" }}
                    >
                        #D1980B
                    </div>
                    <div
                        style={{ backgroundColor: "#D33D17"
                        padding: 20, color: "white" }}
                    >
                        #D33D17
                    </div>
                    <div
                        style={{ backgroundColor: "#9D3F9D"
                        padding: 20, color: "white" }}
                    >
                        #9D3F9D
                    </div>
                </div>
            </div>
        </>
    );
}
  
export default App;


Output:

 

Reference: https://blueprintjs.com/docs/#core/colors.color-schemes

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32342 POSTS0 COMMENTS
Milvus
87 POSTS0 COMMENTS
Nango Kala
6712 POSTS0 COMMENTS
Nicole Veronica
11875 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11937 POSTS0 COMMENTS
Shaida Kate Naidoo
6833 POSTS0 COMMENTS
Ted Musemwa
7092 POSTS0 COMMENTS
Thapelo Manthata
6786 POSTS0 COMMENTS
Umr Jansen
6789 POSTS0 COMMENTS